annotated transcripts from test2 branch

BeethovensWerkstatt · Aug 27, 2023 · 40d9439 · 40d9439
1 parent 3df16d6
commit 40d9439
Show file tree

Hide file tree

Showing 8 changed files with 241 additions and 72 deletions.
diff --git a/src/components/AnnotTab.vue b/src/components/AnnotTab.vue
@@ -16,9 +16,15 @@
         </SideBar>
       </Transition>
       <MainStage class="mainStage stageItem">
-        <h1>{{currentAnnotTabFileName}}</h1>
-        <VerovioComponent purpose="proofreading" :source="$store.getters.currentWzAtPath"/>
-        <ImageComponent />
+        <template v-if="annotatedTranscriptForCurrentWz !== null">
+          <VerovioComponent purpose="proofreading" type="annotTrans" getter="annotatedTranscriptForCurrentWz"/>
+        </template>
+        <template v-else>
+          not yet
+        </template>
+        <template v-if="previewImageUri !== null">
+          <ImageComponent :uri="previewImageUri"/>
+        </template>
       </MainStage>
       <SideBar class="stageItem sidebarRight" position="right" tab="annotTab" v-if="annotTabRightSidebarVisible">
         <div class="desc">
@@ -71,7 +77,13 @@ export default {
         this.verifySvgAvailable()
       })
 
+    this.unwatchAnnotTransVerification = this.$store.watch((state, getters) => getters.currentWzAtPath,
+      (newPath, oldPath) => {
+        this.verifyAnnotTransLoaded()
+      })
+
     this.verifySvgAvailable()
+    this.verifyAnnotTransLoaded()
   },
   beforeUnmount () {
     this.unwatchSvgVerification()
@@ -95,6 +107,15 @@ export default {
         })
       }
     },
+    verifyAnnotTransLoaded () {
+      const atPath = this.$store.getters.currentWzAtPath
+      const at = this.$store.getters.annotatedTranscriptForCurrentWz
+      if (this.$store.getters.availableAnnotatedTranscripts.indexOf(atPath) !== -1 && !at) {
+        this.$store.dispatch('loadAnnotatedTranscript', {
+          path: atPath
+        })
+      }
+    },
     uploadAnnotTrans ({ target: input }) {
       const file = input?.files[0]
       console.log(file)
@@ -123,13 +144,17 @@ export default {
     ...mapGetters(['annotTabLeftSidebarVisible', 'annotTabRightSidebarVisible', 'writingZonesOnCurrentPage', 'activeWritingZone']),
     showFilePicker () {
       const wz = this.writingZonesOnCurrentPage?.find(wz => wz.id === this.activeWritingZone)
-      console.log(wz)
+      // console.log(wz)
       return wz && !wz.annotTrans
     },
     currentAnnotTabFileName () {
-      // TODO create / retrieve filename
-      // return 'NK_p005_wz02_at.xml'
       return this.$store.getters.currentWzAtPath
+    },
+    annotatedTranscriptForCurrentWz () {
+      return this.$store.getters.annotatedTranscriptForCurrentWz
+    },
+    previewImageUri () {
+      return this.$store.getters.currentWzImageUri
     }
   }
 }
@@ -172,6 +197,7 @@ export default {
       flex: 1 1 auto;
       order: 2;
       height: calc(100vh - $totalHeaderHeight - $topMenuHeight - 10px);
+      overflow: scroll;
     }
   }
 }

diff --git a/src/components/WritingZoneDirectory.vue b/src/components/WritingZoneDirectory.vue
@@ -17,18 +17,19 @@
             <span class="actualPreview" :style="wzPageDimensions(page, wz.xywh)"></span>
           </span>
           <span class="hasTrans float-right">
-            <template v-if="wz.annotTrans !== null">
-              <template v-if="wz.annotTrans.firstZone">
-                <span class="desc">annot</span>
-                <i class="icon icon-check" :title="wz.annotTrans.file"></i>
+            <template v-if="this.availableAnnotatedTranscripts.indexOf(wz.annotTrans) !== -1">
+              <span class="desc">Annot<br/>Trans</span>
+              <i class="icon icon-check" :title="wz.annotTrans.file"></i>
+              <!--<template v-if="wz.annotTrans.firstZone">
+
               </template>
               <template v-else>
                 <span class="desc">cont'd</span>
                 <i class="icon icon-link" :title="wz.annotTrans.file"></i>
-              </template>
+              </template>-->
             </template>
             <template v-else>
-              <span class="desc">no trans</span>
+              <span class="desc">not<br/>trans</span>
               <i class="icon icon-stop" title="Writing Zone without Annotated Transcription"></i>
             </template>
           </span>
@@ -108,7 +109,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['activeWritingZone']),
+    ...mapGetters(['activeWritingZone', 'availableAnnotatedTranscripts']),
     activePage () {
       return this.$store.getters.currentPageZeroBased
     },
@@ -209,7 +210,7 @@ export default {
       height: .8rem;
       border: $lightBorder;
       position: relative;
-      top: 2px;
+      top: 3px;
       cursor: pointer;
 
       .actualPreview {
@@ -222,7 +223,7 @@ export default {
       i.icon-check, i.icon-stop, i.icon-link {
         font-size: .7rem;
         position: relative;
-        top: -2px;
+        top: -3px;
         color: darken($darkFontColor, 10%);
       }
 
@@ -232,11 +233,14 @@ export default {
 
       .desc {
         font-weight: 100;
-        font-size: .6rem;
+        font-size: .5rem;
+        line-height: .5rem;
         color: lighten($darkFontColor, 40%);
         margin-right: .2rem;
         position: relative;
-        top: -1px;
+        top: 2px;
+        display: inline-block;
+        text-align: center;
       }
     }
   }

diff --git a/src/components/shared/ImageComponent.vue b/src/components/shared/ImageComponent.vue
@@ -1,17 +1,14 @@
 <template>
   <div class="imageComponent">
-    <img :src="imagesrc" />
+    <img :src="uri" />
   </div>
 </template>
 
 <script>
 export default {
   name: 'ImageComponent',
-  computed: {
-    imagesrc () {
-      // TODO calc IIIF Url for image fragment
-      return 'https://edirom-images.beethovens-werkstatt.de/Scaler/IIIF/D-BNba_HCB_Mh_60%2FHCB_Mh_60_05.jpg/full/full/1/default.jpg'
-    }
+  props: {
+    uri: String
   }
 }
 </script>
@@ -20,16 +17,17 @@ export default {
 @import '@/css/_variables.scss';
 .imageComponent {
   margin: .5rem;
-  padding: .5rem;
   border: $lightBorder;
   border-radius: .3rem;
   background-color: #ffffff;
   box-shadow: 0 0 .3rem #00000066 inset;
-  max-height: calc(100% - 1rem);
+  // max-height: calc(100% - 1rem);
   overflow: auto;
 
   img {
     width: 100%;
+    position: relative;
+    top: .18rem;
   }
 }
 </style>
diff --git a/src/components/shared/VerovioComponent.vue b/src/components/shared/VerovioComponent.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-// import verovio from 'verovio'
+import { draft2score } from '@/tools/mei.js'
 // import { mapGetters } from 'vuex'
 
 const verovioOptions = {
@@ -45,40 +45,36 @@ export default {
   components: {
 
   },
-  data: () => ({
-    unwatchCurrentWzAtPath: null
-  }),
   props: {
     purpose: String,
-    source: String
-  },
-  watch: {
-    sourceDOM () {
-      this.render()
-    }
+    type: String,
+    getter: String
   },
   methods: {
     render () {
-      this.removeListeners()
-
-      if (this.source) {
-        let mei = null
-        // TODO action: documentByPath with optional loading from GH
-        let dom = this.sourceDOM
-        if (dom) {
-          const serializer = new XMLSerializer()
-          mei = serializer.serializeToString(dom)
-          this.vrvToolkit.loadData(mei)
-          const svg = this.vrvToolkit.renderToSVG(1, {})
-
-          this.$refs.mei.innerHTML = svg
-
-          this.addListeners()
-        } else {
-          // TODO load from GitHub
-          dom = null
-          this.$refs.mei.innerHTML = '<div class="placeholder">no transcript available ...</div>'
-        }
+      const meiDom = this.$store.getters[this.getter]
+
+      if (!meiDom) {
+        console.log('VerovioComponent:render(): No data available.')
+        this.$refs.mei.innerHTML = '<div class="placeholder">loading data…</div>'
+        return false
+      }
+
+      try {
+        this.removeListeners()
+
+        const resolvedDrafts = draft2score(meiDom)[0]
+
+        const serializer = new XMLSerializer()
+        const mei = serializer.serializeToString(resolvedDrafts)
+        this.vrvToolkit.loadData(mei)
+        const svg = this.vrvToolkit.renderToSVG(1, {})
+
+        this.$refs.mei.innerHTML = svg
+
+        this.addListeners()
+      } catch (err) {
+        console.log('VerovioComponent:render(): Unable to render file: ' + err, err)
       }
     },
     removeListeners () {
@@ -97,11 +93,6 @@ export default {
       }
     }
   },
-  computed: {
-    sourceDOM () {
-      return this.$store.getters.documentByPath(this.source)
-    }
-  },
   mounted: function () {
     // eslint-disable-next-line
     // this.vrvToolkit = new verovio.toolkit()
@@ -110,13 +101,24 @@ export default {
       this.vrvToolkit.setOptions(verovioOptions)
       this.render()
     })
+
+    this.unwatchData = this.$store.watch((state, getters) => getters[this.getter],
+      (newCode, oldCode) => {
+        if (newCode !== null) {
+          this.render()
+        }
+      })
     /*
     this.unwatchPageXML = this.$store.watch((state, getters) => getters.xmlCode,
       (newCode, oldCode) => {
         this.render()
       })
      */
     this.render()
+  },
+  beforeUnmount () {
+    this.unwatchData()
+    this.removeListeners()
   }
 }
 </script>

diff --git a/src/config.json b/src/config.json
@@ -2,7 +2,7 @@
   "repository":  {
     "owner": "BeethovensWerkstatt",
     "repo": "data",
-    "branch": "test",
+    "branch": "test2",
     "default": "data/sources/Notirungsbuch_K/Notirungsbuch_K.xml"
   },
   "root": "data/sources"