current dump

BeethovensWerkstatt · Dec 7, 2023 · 805d252 · 805d252
1 parent 349e9af
commit 805d252
Show file tree

Hide file tree

Showing 7 changed files with 383 additions and 34 deletions.
diff --git a/src/components/DiploTab.vue b/src/components/DiploTab.vue
@@ -20,6 +20,7 @@
         <SideBar class="stageItem sidebarLeft" position="left" tab="diploTab" v-if="diploTabSidebarVisible">
           <SourceSelector/>
           <WritingZoneDirectory purpose="diploTrans"/>
+          {{ diplomaticTranscriptsOnCurrentPage }}
         </SideBar>
       </Transition>
       <MainStage class="mainStage stageItem">
@@ -29,8 +30,6 @@
         <div class="mainBox">
           <FacsimileComponent type="diploTrans"/>
           <!--<VerovioComponent purpose="transcribing" type="diploTrans" getter="diplomaticTranscriptForCurrentWz" pathGetter="currentWzDtPath"/>-->
-          {{ diploTransActivationsInAnnotTrans.size }} xy
-          {{ diploTransActivationsInShapes.length }}
           <!--<OpenSeadragonComponent/>-->
         </div>
         <!--<div class="mainBox">
@@ -102,10 +101,36 @@ export default {
     },
     initializeDiploTrans () {
       this.$store.dispatch('initializeDiploTrans')
+    },
+    autoTranscribe (newShapes, oldShapes, newAnnotated, oldAnnotated) {
+      if (newShapes.length === 0 || !newAnnotated) {
+        return false
+      }
+
+      const currentWz = this.$store.getters.currentWritingZoneObject
+      if (!currentWz) {
+        return false
+      }
+
+      const atDoc = this.$store.getters.documentByPath(currentWz.annotTrans)
+      const dtDoc = this.$store.getters.documentByPath(currentWz.diploTrans)
+
+      if (!atDoc || !dtDoc) {
+        return false
+      }
+
+      console.log('DiploTab: autoTranscribe()')
+
+      if (newAnnotated === oldAnnotated && newShapes.length > oldShapes.length && oldShapes.length > 0) {
+        // add shape to existing diploTrans
+      } else {
+        console.log('dispatching…')
+        this.$store.dispatch('diploTranscribe')
+      }
     }
   },
   computed: {
-    ...mapGetters(['diploTabSidebarVisible', 'diploTransActivationsInShapes', 'diploTransActivationsInAnnotTrans']),
+    ...mapGetters(['diploTabSidebarVisible', 'diploTransActivationsInShapes', 'diploTransActivationsInAnnotTrans', 'diplomaticTranscriptsOnCurrentPage']),
     showInitializeButton () {
       const currentWz = this.$store.getters.currentWritingZoneObject
       if (!currentWz) {
@@ -136,6 +161,11 @@ export default {
         this.verifyDiploTransLoaded()
       })
 
+    this.unwatchDiploActivations = this.$store.watch((state, getters) => [getters.diploTransActivationsInShapes, getters.diploTransActivationsInAnnotTrans],
+      ([newShapes, newAnnotated], [oldShapes, oldAnnotated]) => {
+        this.autoTranscribe(newShapes, oldShapes, newAnnotated, oldAnnotated)
+      })
+
     this.verifySvgAvailable()
     this.verifyAnnotTransLoaded()
     this.verifyDiploTransLoaded()
@@ -144,6 +174,7 @@ export default {
     this.unwatchSvgVerification()
     this.unwatchAnnotTransVerification()
     this.unwatchDiploTransVerification()
+    this.unwatchDiploActivations()
   }
 }
 </script>

diff --git a/src/components/FacsimileComponent.vue b/src/components/FacsimileComponent.vue
@@ -185,7 +185,7 @@ export default {
       */
 
       // console.log(e)
-      this.$store.dispatch('facsimileClick', click)
+      // this.$store.dispatch('facsimileClick', click)
     },
 
     /**

diff --git a/src/components/shared/VerovioComponent.vue b/src/components/shared/VerovioComponent.vue
@@ -62,14 +62,16 @@ export default {
           const resolvedDraft = draft2score(meiDom)[0]
 
           const svg = await this.$store.getters.annotatedTranscriptForWz(resolvedDraft)
-          this.$refs.mei.innerHTML = svg
+          const localCopy = svg.repeat(1)
+          this.$refs.mei.innerHTML = localCopy
         }
 
         if (this.type === 'diploTrans') {
           const resolvedTrans = draft2page(meiDom)
 
           const svg = await this.$store.getters.diplomaticTranscriptForWz(resolvedTrans)
-          this.$refs.mei.innerHTML = svg
+          const localCopy = svg.repeat(1)
+          this.$refs.mei.innerHTML = localCopy
         }
 
         this.addListeners()
@@ -78,14 +80,14 @@ export default {
       }
     },
     removeListeners () {
-      // this.$refs.mei.removeEventListener('click', this.clickListener)
-      const els = this.$refs.mei.querySelectorAll(selectables)
-      els.forEach((elm) => elm.removeEventListener('click', this.clickListener))
+      this.$refs.mei.removeEventListener('click', this.clickListener)
+      /* const els = this.$refs.mei.querySelectorAll(selectables)
+      els.forEach((elm) => elm.removeEventListener('click', this.clickListener)) */
     },
     addListeners () {
-      // this.$refs.mei.addEventListener('click', this.clickListener)
-      const els = this.$refs.mei.querySelectorAll(selectables)
-      els.forEach((elm) => elm.addEventListener('click', this.clickListener))
+      this.$refs.mei.addEventListener('click', this.clickListener)
+      /* const els = this.$refs.mei.querySelector('selectables')
+      els.forEach((elm) => elm.addEventListener('click', this.clickListener)) */
     },
     clickListener (e) {
       const target = e.target.closest(selectables)
@@ -96,7 +98,7 @@ export default {
         // target.classList.toggle('supplied')
         const id = target.getAttribute('data-id')
         const name = target.getAttribute('data-class')
-        // console.log(this.purpose, id, name)
+
         const meiDom = this.$store.getters[this.getter]
         const path = this.$store.getters[this.pathGetter]
         this.$store.dispatch('clickedVerovio', {
@@ -108,6 +110,25 @@ export default {
           callback: () => { this.render() }
         })
       }
+    },
+    /**
+     * adds a highlighted class to the element with the given id
+     * @param {*} newActivation
+     * @param {*} oldActivation
+     */
+    activateElement (newActivation, oldActivation) {
+      if ((!newActivation && oldActivation) || (oldActivation && newActivation !== oldActivation)) {
+        const oldEl = this.$refs.mei.querySelector('*[data-id="' + oldActivation.id + '"]')
+        if (oldEl) {
+          oldEl.classList.remove('highlighted')
+        }
+      }
+      if (newActivation) {
+        const newEl = this.$refs.mei.querySelector('*[data-id="' + newActivation.id + '"]')
+        if (newEl) {
+          newEl.classList.add('highlighted')
+        }
+      }
     }
   },
   mounted: function () {
@@ -125,6 +146,13 @@ export default {
           this.render()
         }
       })
+
+    this.unwatchActivations = this.$store.watch((state, getters) => getters.diploTransActivationsInAnnotTrans,
+      (newActivation, oldActivation) => {
+        if (this.purpose === 'transcribing') {
+          this.activateElement(newActivation, oldActivation)
+        }
+      })
     /*
     this.unwatchPageXML = this.$store.watch((state, getters) => getters.xmlCode,
       (newCode, oldCode) => {
@@ -136,6 +164,7 @@ export default {
   beforeUnmount () {
     this.unwatchData()
     this.removeListeners()
+    this.unwatchActivations()
   }
 }
 </script>
@@ -159,6 +188,11 @@ export default {
     stroke: $svgSuppliedColor;
   }
 
+  svg .highlighted {
+    fill: $scoreHighlightedColor;
+    stroke: $scoreHighlightedColor;
+  }
+
   .placeholder {
     font-size: 24p;
     font-weight: bold;

diff --git a/src/css/_variables.scss b/src/css/_variables.scss
@@ -29,3 +29,5 @@ $svgUnassignedShapeColor: #ff00ff;
 
 $svgActiveWritingZoneColor: $highlightColor06; //#468ffc;
 $svgActiveWritingLayerColor: $highlightColor05;
+
+$scoreHighlightedColor: $highlightColor01;