[for discussion] Include manifesto

minimal_redux_poc/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "lint": "node_modules/.bin/eslint ./",
     "server": "node_modules/.bin/http-server -p 4444",
-    "test": "npm run build && npm run lint && node_modules/.bin/jest",
+    "test": "npm run build && npm run lint && node_modules/.bin/jest && codecov",
     "test:watch": "npm test -- --watch",
     "build": "node_modules/.bin/webpack"
   },
@@ -20,6 +20,7 @@
     "node-fetch": "2.1.1",
     "node-sass": "^4.9.2",
     "prop-types": "^15.6.2",
+    "raf-throttle": "^2.0.3",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
     "react-redux": "^5.0.7",
@@ -60,6 +61,8 @@
     ],
     "testPathIgnorePatterns": [
       "__tests__/integration/react-example/.*jsx?"
-    ]
+    ],
+    "coverageDirectory": "./coverage/",
+    "collectCoverage": true
   }
 }

minimal_redux_poc/src/action-types.js

@@ -4,6 +4,7 @@ const ActionTypes = {
   ADD_WINDOW: 'ADD_WINDOW',
   NEXT_CANVAS: 'NEXT_CANVAS',
   PREVIOUS_CANVAS: 'PREVIOUS_CANVAS',
+  UPDATE_WINDOW_POSITION: 'UPDATE_WINDOW_POSITION',
   REMOVE_WINDOW: 'REMOVE_WINDOW',
   PICK_WINDOWING_SYSTEM: 'PICK_WINDOWING_SYSTEM',
   REQUEST_MANIFEST: 'REQUEST_MANIFEST',

minimal_redux_poc/src/actions/index.js

@@ -29,14 +29,28 @@ export function addWindow(options) {
     id: `window.${new Date().valueOf()}`,
     canvasIndex: 0,
     collectionIndex: 0,
-    manifestIndex: 0,
+    manifestId: options.manifestId,
     rangeId: null,
-    xywh: null,
-    rotation: null,
+    xywh: [0, 0, 200, 200],
   };
   return { type: ActionTypes.ADD_WINDOW, payload: Object.assign({}, defaultOptions, options) };
 }
 
+/**
+ * updateWindowPosition - action creator
+ *
+ * @param  {String} windowId
+ * @param  {Array} position
+ * @memberof ActionCreators
+ */
+export function updateWindowPosition(windowId, position) {
+  return {
+    type: ActionTypes.UPDATE_WINDOW_POSITION,
+    windowId,
+    position,
+  };
+}
+
 /**
  * removeWindow - action creator
  *

minimal_redux_poc/src/components/App.js

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import { actions } from '../store';
 import Display from './Display';
 import ManifestForm from './ManifestForm';
+import ManifestListItem from './ManifestListItem';
+import Workspace from './Workspace';
 
 /**
  * This is the top level Mirador component.
@@ -58,7 +60,10 @@ class App extends Component {
    */
   render() {
     const manifestList = Object.keys(this.props.manifests).map(manifest => (
-      <li key={manifest}>{manifest}</li>
+      <ManifestListItem
+        key={manifest}
+        manifestId={manifest}
+      />
     ));
     return (
       <div className="App">
@@ -68,6 +73,7 @@ class App extends Component {
         <Display
           manifest={this.props.manifests[this.state.lastRequested]}
         />
+        <Workspace />
       </div>
     );
   }

minimal_redux_poc/src/components/ManifestListItem.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { actions } from '../store';
+
+const handleOpenButtonClick = (event, manifestId, addWindow) => {
+  addWindow({
+    manifestId: manifestId
+  });
+}
+/**
+ * Represents an item in a list of currently-loaded or loading manifests
+ * @param {object} props
+ * @param {object} [props.manifest = string]
+ */
+const ManifestListItem = ({ manifestId, addWindow}) => (
+  <li className="manifest-list-item">
+    <a href="#" onClick={(event) => handleOpenButtonClick(event, manifestId, addWindow)}>
+      {manifestId}
+    </a>
+  </li>
+);
+
+ManifestListItem.propTypes = {
+  manifestId: PropTypes.string.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+const mapStateToProps = () => (
+  {}
+);
+
+const mapDispatchToProps = dispatch => ({
+  addWindow: options => (
+    dispatch(actions.addWindow(options))
+  ),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ManifestListItem);

minimal_redux_poc/src/components/Window.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { actions } from '../store';
+import throttle from 'raf-throttle';
+import WindowNavBar from './WindowNavBar';
+
+const getThumbnailForManifest = (manifest) => {
+  // TODO: use manifesto or some other spec
+  // compliance library to deal with this,
+  // since most manifests don't have properly-formatted
+  // thumbnails
+  return manifest.json.thumbnail['@id']
+}
+
+const handleDragWindow = throttle((event, windowId, position, updateWindowPosition) => {
+  let x = event.clientX - 400
+  let y = event.clientY - 100
+  console.log(x + ', ' + y);
+  console.log(event)
+  updateWindowPosition(windowId, [x,y])
+})
+
+/**
+ * Represents a Window in the mirador workspace
+ * @param {string} manifestId
+ * @param {string} windowId
+ * @param {array} position
+ * @param {function} updateWindowPosition
+ */
+const Window = ({ manifest, windowId, updateWindowPosition, windows }) => {
+  let window = windows.find((window)=> window.id === windowId)
+  let position = window.xywh
+  return (<div
+      draggable="true"
+      onDragStart={(event)=>{
+      document.addEventListener("dragover", function(event) {
+
+      // prevent default to allow drop
+      event.preventDefault();
+
+        }, false);
+        let dragImg = new Image()
+        dragImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+        event.dataTransfer.setDragImage(dragImg, 0, 0);
+      }}
+      onDrag={(event)=>{
+        event.persist()
+        handleDragWindow(
+            event,
+            windowId,
+            position,
+            updateWindowPosition
+      )}}
+      className="mirador-window"
+      style={{transform: 'translateX(' + position[0] +'px) translateY('+ position[1] + 'px)'}}
+    >
+    <img draggable="false" src={getThumbnailForManifest(manifest)}/>
+          <WindowNavBar
+            windowId={windowId}
+          />
+        </div>)
+};
+
+Window.propTypes = {
+  manifest: PropTypes.object,
+  windowId: PropTypes.string,
+};
+
+const mapStateToProps = state => (
+  {
+    windows: state.windows
+  }
+);
+
+const mapDispatchToProps = dispatch =>({
+  updateWindowPosition: (windowId, position) => (
+    dispatch(actions.updateWindowPosition(windowId, position))
+  ),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Window);

minimal_redux_poc/src/components/WindowNavBar.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { actions } from '../store';
+
+const handleNextCanvas = (event, windowId, nextCanvas) => {
+  nextCanvas(windowId)
+}
+const handlePreviousCanvas = (event, windowId, previousCanvas) => {
+  previousCanvas(windowId)
+}
+/**
+ * Represents a control bar for navigating
+ * the Mirador window content
+ *
+ * @param {string} windowId
+ * @param {function} nextCanvas
+ */
+const WindowNavBar = ({ windowId, nextCanvas, previousCanvas, windows }) => {
+  let window = windows.find((window)=> window.id === windowId)
+
+  return (
+      <div className="window-controls">
+      <button
+        onClick={(event)=>previousCanvas(windowId)}
+        className="previous-button"
+        type="button">
+          Previous
+      </button>
+      <button
+        onClick={(event)=>nextCanvas(windowId)}
+        className="next-button"
+        type="button">
+          Next
+      </button>
+      </div>
+  )
+};
+
+WindowNavBar.propTypes = {
+  windowId: PropTypes.string,
+};
+
+const mapStateToProps = state => (
+  {
+    windows: state.windows
+  }
+);
+
+const mapDispatchToProps = dispatch =>({
+  nextCanvas: (windowId, position) => (
+    dispatch(actions.nextCanvas(windowId))
+  ),
+  previousCanvas: (windowId, position) => (
+    dispatch(actions.previousCanvas(windowId))
+  ),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(WindowNavBar);

minimal_redux_poc/src/components/Workspace.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { actions } from '../store';
+import Window from './Window';
+
+/**
+ * Represents an item in a list of currently-loaded or loading manifests
+ * @param {object} props
+ * @param {object} [props.manifest = string]
+ */
+const Workspace = ({ windows, manifests }) => (
+    <div className="mirador-workspace">
+    {
+      windows.map(window => (
+        <Window
+          key={window.id}
+          windowId={window.id}
+          manifest={manifests[window.manifestId]}
+        />
+      ))
+    }
+  </div>
+);
+
+Workspace.propTypes = {
+  windows: PropTypes.instanceOf(Array),
+};
+
+const mapStateToProps = state => (
+  {
+    windows: state.windows,
+    manifests: state.manifests
+  }
+);
+
+const mapDispatchToProps = dispatch => ({});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Workspace);

minimal_redux_poc/src/reducers/windows.js

@@ -23,6 +23,15 @@ const windowsReducer = (state = [], action) => {
         }
         return window;
       });
+    case ActionTypes.UPDATE_WINDOW_POSITION:
+      return state.map((window) => {
+        if (window.id === action.windowId) {
+          return Object.assign({}, window, {
+            xywh: [action.position[0], action.position[1], 200, 200],
+          });
+        }
+        return window;
+      });
     default:
       return state;
   }

minimal_redux_poc/src/styles/index.scss

@@ -1,3 +1,46 @@
 body {
-  background: lighten(red, 20%);
+  background: white;
+  margin: 0;
+  padding: 0;
+}
+
+#exampleManifest {
+    border: 1px solid black;
+    width: 300px;
+    overflow: scroll;
+}
+
+.mirador-workspace {
+    margin-left: 300px;
+    border: 1px solid black;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.window-controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.mirador-window {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200px;
+    height: 200px;
+    box-shadow: 0 0 10px gray;
+    text-align: center;
+    background: black;
+    overflow: hidden;
+    margin: 20px;
+    img {
+        width:200px;
+        mouse-events: none;
+
+    }
 }