From 40d9439702eae41adc350c66e8f936830cb0d90d Mon Sep 17 00:00:00 2001
From: Johannes Kepper <kepper@edirom.de>
Date: Sun, 27 Aug 2023 02:05:30 +0200
Subject: [PATCH] annotated transcripts from test2 branch

---
 src/components/AnnotTab.vue                | 38 ++++++++++--
 src/components/WritingZoneDirectory.vue    | 26 ++++----
 src/components/shared/ImageComponent.vue   | 14 ++---
 src/components/shared/VerovioComponent.vue | 72 +++++++++++-----------
 src/config.json                            |  2 +-
 src/store/data/index.js                    | 67 ++++++++++++++++----
 src/store/octokit/index.js                 | 66 ++++++++++++++++++++
 src/tools/mei.js                           | 28 +++++++++
 8 files changed, 241 insertions(+), 72 deletions(-)

diff --git a/src/components/AnnotTab.vue b/src/components/AnnotTab.vue
index 8519e78..f9ef3bc 100644
--- 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
index ceeda43..4752047 100644
--- 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
index a456c84..395f647 100644
--- 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
index ef6681d..0b92364 100644
--- 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,6 +101,13 @@ 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) => {
@@ -117,6 +115,10 @@ export default {
       })
      */
     this.render()
+  },
+  beforeUnmount () {
+    this.unwatchData()
+    this.removeListeners()
   }
 }
 </script>
diff --git a/src/config.json b/src/config.json
index c9f0dde..5f1a6c2 100644
--- 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"
diff --git a/src/store/data/index.js b/src/store/data/index.js
index b2d0428..83edce5 100644
--- a/src/store/data/index.js
+++ b/src/store/data/index.js
@@ -1,6 +1,7 @@
 // import { dom2base64, str2base64 } from '@/tools/github'
 import { uuid } from '@/tools/uuid.js'
-import OpenSeadragon from 'openseadragon'
+// import OpenSeadragon from 'openseadragon'
+import { getOuterBoundingRect } from '@/tools/trigonometry.js'
 import { /* convertRectUnits, */ sortRastrumsByVerticalPosition } from '@/tools/mei.js'
 // import { getRectFromFragment } from '@/tools/trigonometry.js'
 // import { Base64 } from 'js-base64'
@@ -1585,18 +1586,19 @@ const dataModule = {
         return null
       }
 
-      let z = -1
+      // let z = -1
       const wz = getters.writingZonesOnCurrentPage.find((wz, zi) => {
         const found = wz.id === getters.activeWritingZone
-        if (found) z = zi
+        // if (found) z = zi
         return found
       })
       if (!wz) return null
 
-      const docName = page.document
+      return wz.annotTrans
+      /* const docName = page.document
       const docPath = getters.documentPathByName(docName)
       const meipath = docPath.split(docName + '.xml')[0] + 'annotatedTranscript/' + docName + '_p' + String(pageIndex + 1).padStart(3, '0') + '_wz' + String(z + 1).padStart(2, '0') + '_at.xml'
-      return meipath
+      return meipath */
     },
 
     /**
@@ -1617,6 +1619,23 @@ const dataModule = {
       return svgDom
     },
 
+    /**
+     * retrieves an annotated transcript for a given path
+     * @param  {[type]} state                 [description]
+     * @param  {[type]} getters               [description]
+     * @return {[type]}         [description]
+     */
+    annotatedTranscriptForCurrentWz: (state, getters) => {
+      const path = getters.currentWzAtPath
+      if (getters.availableAnnotatedTranscripts.indexOf(path) === -1) {
+        return null
+      }
+
+      const atDom = getters.documentByPath(path)
+
+      return atDom
+    },
+
     /**
      * retrieves the document with the current page
      * @param  {[type]} state                 [description]
@@ -1801,17 +1820,16 @@ const dataModule = {
       }
 
       const deg = fragment.rotate
+      const pageFragment = getOuterBoundingRect(0, 0, page.mmWidth, page.mmHeight, deg)
+
+      const xScale = pageFragment.w / fragment.w
+      const yScale = pageFragment.height / fragment.h
 
-      const pageRect = new OpenSeadragon.Rect(0, 0, page.mmWidth, page.mmHeight, deg)
-      const pageBBox = pageRect.getBoundingBox()
+      // pageFragment
 
-      const xScale = pageBBox.width / fragment.w
-      const yScale = pageBBox.height / fragment.h
       console.log('xScale: ' + xScale + ', yScale: ' + yScale)
       console.log('page', page)
       console.log('fragment', fragment)
-      console.log('pageRect', pageRect)
-      console.log('pageBBox', pageBBox)
 
       const imageOriginX = fragment.x * xScale * -1
       const imageOriginY = fragment.y * xScale * -1
@@ -2222,6 +2240,33 @@ const dataModule = {
       })
 
       return arr
+    },
+
+    /**
+     * retrieve preview image for current writing zone
+     * @param  {[type]} state                 [description]
+     * @param  {[type]} getters               [description]
+     * @return {[type]}         [description]
+     */
+    currentWzImageUri: (state, getters) => {
+      const wzId = getters.activeWritingZone
+      if (!wzId) {
+        return null
+      }
+      const wzDetails = getters.writingZonesOnCurrentPage?.find(wz => wz.id === wzId)
+      if (!wzDetails) {
+        return null
+      }
+      const pageDetails = getters.currentPageDetails
+      if (!pageDetails) {
+        return null
+      }
+
+      const baseUri = pageDetails.uri.split('#')[0] + '/'
+      const xywh = wzDetails.xywh
+      const size = '/1000,/0/default.jpg'
+
+      return baseUri + xywh + size
     }
   }
 }
diff --git a/src/store/octokit/index.js b/src/store/octokit/index.js
index 42befc6..828166b 100644
--- a/src/store/octokit/index.js
+++ b/src/store/octokit/index.js
@@ -25,6 +25,8 @@ const state = {
   committing: false,
 
   sources: [],
+  availableAnnotatedTranscripts: [],
+  loadedAnnotatedTranscripts: {},
   documents: {},
   // TODO rename / move to store.gui?
   filepath: undefined, // path of selected file
@@ -63,6 +65,8 @@ const getters = {
   loggedChanges: state => state.changes,
   changesNeedBranching: state => state.changesNeedBranching,
 
+  availableAnnotatedTranscripts: state => state.availableAnnotatedTranscripts,
+  annotatedTranscript: state => (path) => state.loadedAnnotatedTranscripts[path],
   // getCommit: (state, getters) => (sha) => getters.octokit.
 
   proposedCommitMessage: state => {
@@ -154,6 +158,9 @@ const mutations = {
   SET_SOURCES (state, sources) {
     state.sources = sources
   },
+  SET_AVAILABLE_ANNOTATED_TRANSCRIPTS (state, annotatedTranscripts) {
+    state.availableAnnotatedTranscripts = annotatedTranscripts
+  },
   SET_CONTENT_DATA (state, { repo, owner, ref, path, name, sha, doc }) {
     if (!doc) console.warn(`no document '${path}'`)
     state.documents[path] = { repo, owner, ref, path, name, sha, doc }
@@ -345,6 +352,55 @@ const actions = {
     }
   },
 
+  loadAnnotatedTranscript (
+    { commit, dispatch, getters },
+    {
+      owner = config.repository.owner, // 'BeethovensWerkstatt',
+      repo = config.repository.repo, // 'data',
+      path,
+      ref = config.repository.branch, // 'dev'
+      callback = null // optional callback to call, when loading is finished
+    }) {
+    const contentData = getters.getContentData(path)
+
+    // console.log('\n\nYODIYAY')
+    // console.log(contentData)
+
+    if (contentData?.doc) {
+      // dispatch('setData', contentData.doc) // TODO set SVG?
+      console.log(contentData.path, 'loaded from cache')
+    } else {
+      getters.octokit.repos.getContent({
+        owner,
+        repo,
+        path,
+        ref,
+        headers: {
+          Accept: 'application/vnd.github.v3.raw'
+        }
+      }).then(({ data }) => {
+        // console.log('received this as svg raw text')
+        // console.log(data) // , data.content)
+        const svgText = data
+        // console.log(svgText)
+        const parser = new DOMParser()
+        const mei = parser.parseFromString(svgText, 'image/svg+xml')
+        // const relativePath = './' + path.split('/').slice(config.root.split('/').length + 1).join('/')
+        // console.log(path, relativePath)
+        const dom = mei // .querySelector('svg')
+
+        // console.log(dom)
+        dispatch('loadDocumentIntoStore', { path, dom })
+        // dispatch('loadDocumentIntoStore', { path: relativePath, dom: svg })
+        if (typeof callback === 'function') {
+          const data = { xml: mei, dom }
+          callback(data)
+          callback = null
+        }
+      })
+    }
+  },
+
   loadXmlFile (
     { commit, dispatch, getters },
     {
@@ -747,6 +803,7 @@ const actions = {
     // console.log(repometa)
     dispatch('setLoading', true)
     const sourcefiles = []
+    const annotatedTranscripts = []
     const repo = new OctokitRepo(repometa)
     // repo.getLastCommit().then(c => console.log('latest commit', c))
     const root = await repo.folder
@@ -763,10 +820,19 @@ const actions = {
             // console.log('source:', srcfile.path)
             sourcefiles.push({ name: source.name, path: srcfile.path })
           }
+          if (srcfile.name === 'annotatedTranscripts') {
+            const transcripts = await srcfile.folder
+            for (const transcript of transcripts) {
+              if (transcript.name.endsWith('.xml') || transcript.name.endsWith('.mei')) {
+                annotatedTranscripts.push(transcript.path)
+              }
+            }
+          }
         }
       }
     }
     commit('SET_SOURCES', sourcefiles)
+    commit('SET_AVAILABLE_ANNOTATED_TRANSCRIPTS', annotatedTranscripts)
     // TODO: this is a replacement for the commit above. This is in the data module
     commit('SET_DOCUMENTNAME_PATH_MAPPING', sourcefiles)
     // build a Promise to wait for loading of all sources
diff --git a/src/tools/mei.js b/src/tools/mei.js
index abe4e10..1c4553c 100644
--- a/src/tools/mei.js
+++ b/src/tools/mei.js
@@ -229,3 +229,31 @@ export function sortRastrumsByVerticalPosition (rastrumDesc) {
   const reordered = rastrums.sort(sortFunc)
   reordered.forEach(rastrum => rastrumDesc.append(rastrum))
 }
+
+/**
+ * Translates draft elements to regular score elements.
+ * Generates an array of MEI DOMs, each starting with <music>
+ * @param  {[type]} meiDom               [description]
+ * @return {[type]}        [description]
+ */
+export function draft2score (meiDom) {
+  const arr = []
+  meiDom.querySelectorAll('draft').forEach(draft => {
+    const music = document.createElementNS('http://www.music-encoding.org/ns/mei', 'music')
+    music.setAttribute('meiversion', '5.0.0-dev')
+    const body = document.createElementNS('http://www.music-encoding.org/ns/mei', 'body')
+    const mdiv = document.createElementNS('http://www.music-encoding.org/ns/mei', 'mdiv')
+    const score = document.createElementNS('http://www.music-encoding.org/ns/mei', 'score')
+
+    music.append(body)
+    body.append(mdiv)
+    mdiv.append(score)
+
+    const childArr = [...draft.children]
+    childArr.forEach(child => {
+      score.append(child)
+    })
+    arr.push(music)
+  })
+  return arr
+}