Image zones (#55)

* add selectable image zones finish initial zone display refactor WIP pending selection bug fix store zone selection state in URL include facs attribute in HTML highlight selected text use outline instead of border fix book mode and refactor * fix install/build issues
cu-mkp · Aug 31, 2023 · 86f8afd · 86f8afd
1 parent c7daee0
commit 86f8afd
Show file tree

Hide file tree

Showing 14 changed files with 27,603 additions and 20,095 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/editioncrafter/package-lock.json b/editioncrafter/package-lock.json
diff --git a/editioncrafter/package.json b/editioncrafter/package.json
@@ -28,10 +28,11 @@
   "dependencies": {
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
+    "@recogito/annotorious-openseadragon": "^2.7.11",
     "axios": "^1.3.4",
     "history": "^5.3.0",
     "html-react-parser": "^3.0.9",
-    "openseadragon": "^4.0.0",
+    "openseadragon": "^4.1.0",
     "prop-types": "^15.5.10",
     "react-icons": "^4.8.0",
     "react-infinite-scroller": "^1.1.3",
@@ -108,5 +109,10 @@
   "peerDependencies": {
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
+  },
+  "overrides": {
+    "@recogito/annotorious-openseadragon": {
+      "openseadragon": "$openseadragon"
+    }
   }
 }
diff --git a/editioncrafter/src/action/DocumentActions.js b/editioncrafter/src/action/DocumentActions.js
@@ -80,30 +80,32 @@ function parseAnnotationURLs(canvas, transcriptionTypes) {
 
   if (canvas.annotations) {
     for (const annotationPage of canvas.annotations) {
-      if (annotationPage.type !== 'AnnotationPage') throwError(`Expected AnnotationPage in annotations property of ${canvas.id}`);
-      if (!annotationPage.items) throwError(`Expected items property in AnnotationPage ${annotationPage.id}`);
-      for (const annotation of annotationPage.items) {
-        if (annotation.type !== 'Annotation') throwError(`Expected Annotation in items property of ${annotationPage.id}`);
-        if (annotation.motivation === 'supplementing') {
-          if (!annotation.body) throwError(`Expected body property in Annotation ${annotation.id}`);
-          const { body: annotationBody } = annotation;
-          if (annotationBody.profile === textPartialResourceProfileID && annotationBody.type === 'TextPartial') {
-            if (!annotationBody.id) throwError(`Expected id property in TextPartial in ${annotation.id}`);
-            if (!annotationBody.format) throwError(`Expected format property in TextPartial in ${annotation.id}`);
-            const { id, format } = annotationBody;
-            const idParts = id.split('/');
-            if (idParts.length < 5) throwError(`TextPartial id property is in the wrong format: ${id}`);
-            const transcriptionTypeID = idParts[idParts.length - 2];
-            if (transcriptionTypes[transcriptionTypeID]) {
-              if (!annos[transcriptionTypeID]) annos[transcriptionTypeID] = {};
-              if (format === 'text/html') annos[transcriptionTypeID].htmlURL = id;
-              if (format === 'text/xml') annos[transcriptionTypeID].xmlURL = id;
+      if (annotationPage.type === 'AnnotationPage') {
+        if (!annotationPage.items) throwError(`Expected items property in AnnotationPage ${annotationPage.id}`);
+        for (const annotation of annotationPage.items) {
+          if (annotation.type !== 'Annotation') throwError(`Expected Annotation in items property of ${annotationPage.id}`);
+          if (annotation.motivation === 'supplementing') {
+            if (!annotation.body) throwError(`Expected body property in Annotation ${annotation.id}`);
+            const { body: annotationBody } = annotation;
+            if (annotationBody.profile === textPartialResourceProfileID && annotationBody.type === 'TextPartial') {
+              if (!annotationBody.id) throwError(`Expected id property in TextPartial in ${annotation.id}`);
+              if (!annotationBody.format) throwError(`Expected format property in TextPartial in ${annotation.id}`);
+              const { id, format } = annotationBody;
+              const idParts = id.split('/');
+              if (idParts.length < 5) throwError(`TextPartial id property is in the wrong format: ${id}`);
+              const transcriptionTypeID = idParts[idParts.length - 2];
+              if (transcriptionTypes[transcriptionTypeID]) {
+                if (!annos[transcriptionTypeID]) annos[transcriptionTypeID] = {};
+                if (format === 'text/html') annos[transcriptionTypeID].htmlURL = id;
+                if (format === 'text/xml') annos[transcriptionTypeID].xmlURL = id;
+              }
             }
           }
         }
       }
     }
   }
+
   return annos;
 }
 
@@ -135,6 +137,7 @@ function parseManifest(manifest, transcriptionTypes) {
       image_zoom_url: imageURL,
       image_thumbnail_url: thumbnailURL,
       annotationURLs,
+      annotations: canvas.annotations.filter(a => a.motivation === 'tagging'),
     };
 
     folios.push(folio);

diff --git a/editioncrafter/src/component/DiploMatic.js b/editioncrafter/src/component/DiploMatic.js
@@ -1,50 +1,48 @@
 import withWidth from '@material-ui/core/withWidth';
 import { createBrowserHistory } from 'history';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 import { connect, Provider } from 'react-redux';
 import {
   HashRouter, Route, Navigate, Routes,
 } from 'react-router-dom';
 import DocumentView from './DocumentView';
 import RouteListener from './RouteListener';
 
-class DiploMatic extends Component {
-  componentDidMount() {
+const DiploMatic = (props) => {
+  useEffect(() => {
     const history = createBrowserHistory();
     history.listen(() => {
       window.scrollTo(0, 0);
     });
-  }
+  });
 
-  render() {
-    const { fixedFrameMode } = this.props.diplomatic;
-    const fixedFrameModeClass = fixedFrameMode ? 'fixed' : 'sticky';
+  const { fixedFrameMode } = props.diplomatic;
+  const fixedFrameModeClass = fixedFrameMode ? 'fixed' : 'sticky';
 
-    return (
-      <Provider store={this.props.store}>
-        <HashRouter>
-          <div id="diplomatic" className={fixedFrameModeClass}>
-            <RouteListener />
-            <div id="content">
-              <Routes>
-                <Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2" element={<DocumentView {...this.props} />} exact />
-                <Route path="/ec/:folioID/:transcriptionType" element={<DocumentView {...this.props} />} exact />
-                <Route path="/ec/:folioID" element={<DocumentView {...this.props} />} exact />
-                <Route path="/ec" element={<DocumentView {...this.props} />} exact />
-                <Route path="/" element={<Navigate to="/ec" />} exact />
-              </Routes>
-            </div>
+  return (
+    <Provider store={props.store}>
+      <HashRouter>
+        <div id="diplomatic" className={fixedFrameModeClass}>
+          <RouteListener />
+          <div id="content">
+            <Routes>
+              <Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2" element={<DocumentView {...props} />} exact />
+              <Route path="/ec/:folioID/:transcriptionType" element={<DocumentView {...props} />} exact />
+              <Route path="/ec/:folioID" element={<DocumentView {...props} />} exact />
+              <Route path="/ec" element={<DocumentView {...props} />} exact />
+              <Route path="/" element={<Navigate to="/ec" />} exact />
+            </Routes>
           </div>
-        </HashRouter>
-      </Provider>
-    );
-  }
-}
+        </div>
+      </HashRouter>
+    </Provider>
+  );
+};
 
 DiploMatic.propTypes = {
-  store: PropTypes.object.isRequired,
-  config: PropTypes.object.isRequired
+  store: PropTypes.isRequired,
+  config: PropTypes.isRequired,
 };
 
 function mapStateToProps(state) {