xml editor and other fun (wip)

src/components/DiploTab.vue

@@ -33,6 +33,7 @@
           <!--<OpenSeadragonComponent/>-->
         </div>
         <div class="mainBox">
+          <DiploTabMenu :filePath="editorSettings.filePath" :id="editorSettings.id"/>
           <XmlEditor :filePath="editorSettings.filePath" :id="editorSettings.id"/>
         </div>
         <div class="mainBox">
@@ -57,6 +58,8 @@ import FacsimileComponent from '@/components/FacsimileComponent.vue'
 import VerovioComponent from '@/components/shared/VerovioComponent.vue'
 import XmlEditor from '@/components/XmlEditor.vue'
 
+import DiploTabMenu from '@/components/DiploTabMenu.vue'
+
 export default {
   name: 'DiploTab',
   components: {
@@ -68,7 +71,8 @@ export default {
     WritingZoneDirectory,
     FacsimileComponent,
     VerovioComponent,
-    XmlEditor
+    XmlEditor,
+    DiploTabMenu
   },
   methods: {
     toggleSidebar () {
@@ -139,11 +143,12 @@ export default {
         return false
       }
 
-      // console.log('DiploTab: autoTranscribe()')
+      console.log('DiploTab: autoTranscribe()', newShapes, oldShapes, newAnnotated, oldAnnotated)
 
       if (newAnnotated === oldAnnotated && newShapes.length > oldShapes.length && oldShapes.length > 0) {
         // add shape to existing diploTrans
         console.log('TODO: add shape to existing diploTrans')
+        this.$store.dispatch('diploTranscribe_setShapes', { annotElem: newAnnotated, shapes: newShapes })
       } else {
         this.$store.dispatch('diploTranscribe')
       }

src/components/DiploTabMenu.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="diploTabMenu">
+    <div class="entry">
+        <label>@xml:id</label>
+        <div class="value string">{{elementId}}</div>
+    </div>
+    <div class="entry">
+        <label>@coord.x1</label>
+        <div class="value">
+            <SliderInput label="" getterName="activeDiploTransElementAttValue" idParam="coord.x1" setterName="setActiveDiploTransElementAttValue" :min="0" :max="pageWidth" :step="1"/>
+        </div>
+    </div>
+    <div class="entry" v-if="isNote">
+        <label>@loc</label>
+        <div class="value">
+            <SliderInput label="" getterName="activeDiploTransElementAttValue" idParam="loc" setterName="setActiveDiploTransElementAttValue" :min="-10" :max="25" :step="1"/>
+        </div>
+    </div>
+    <div class="entry" v-if="isNote">
+        <label>@stem.len</label>
+        <div class="value" v-if="hasStemLen">
+            <SliderInput label="" getterName="activeDiploTransElementAttValue" idParam="stem.len" setterName="setActiveDiploTransElementAttValue" :min="0" :max="25" :step="1" :readOnly="false"/>
+        </div>
+        <div class="value string button" :onClick="initStemLen" v-else>add attribute</div>
+    </div>
+    <div class="entry" :onClick="test">Push</div>
+  </div>
+</template>
+
+<script>
+import SliderInput from '@/components/SliderInput.vue'
+
+export default {
+  name: 'DiploTabMenu',
+  props: {
+    filePath: String,
+    id: String
+  },
+  components: {
+    SliderInput
+  },
+  methods: {
+    initStemLen () {
+      this.$store.dispatch('setActiveDiploTransElementAttValue', { id: 'stem.len', value: 8 })
+    },
+    test () {
+      const doc = this.$store.getters.documentByPath(this.filePath)
+      console.log('got doc: \n', doc)
+    }
+  },
+  computed: {
+    elementId () {
+      return this.$store.getters.activeDiploTransElementId
+    },
+    pageWidth () {
+      const width = this.$store.getters.currentPageDetails?.mmWidth
+      if (!width) {
+        return 1000
+      }
+      return parseFloat(width)
+    },
+    isNote () {
+      return this.$store.getters.activeDiploTransElementName === 'note'
+    },
+    isRest () {
+      return this.$store.getters.activeDiploTransElementName === 'rest'
+    },
+    hasStemLen () {
+      const val = this.$store.getters.activeDiploTransElementAttValue('stem.len')
+      return val !== null
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.diploTabMenu {
+  background-color: #484848;
+  color: white;
+  padding: .1rem .5rem;
+
+  .entry {
+    display: inline-block;
+    margin: 0 1rem 0 0;
+    vertical-align: top;
+    label {
+      font-size: .6rem;
+      color: #999999;
+      font-weight: bold;
+      margin: 0;
+      padding: 0;
+      text-shadow: 1px 1px 2px #000000;
+    }
+    .value {
+      font-size: .7rem;
+      color: #ffffff;
+      font-weight: 100;
+      margin: 0;
+      padding: 0;
+      line-height: .6rem;
+      text-shadow: 1px 1px 2px #000000;
+
+      &.string {
+        margin-top: .2rem;
+      }
+    }
+
+    .button {
+      cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>

src/components/FacsimileComponent.vue

@@ -167,7 +167,7 @@ export default {
       click.page = clickedPagePos
       // }
 
-      console.log('-------------\n\nCLICK\n\n------------\n', click)
+      // console.log('-------------\n\nCLICK\n\n------------\n', click)
 
       // check for click to svg shape
       if (click.target.localName === 'path') {
@@ -506,6 +506,7 @@ export default {
 
       if (activeZone) {
         svgClone.querySelector('#' + activeZone.svgGroupWzId).classList.add('activeWritingZone')
+        this.indicateUsedShapes()
       }
 
       if (activeZone && activeWritingLayer) {
@@ -517,6 +518,41 @@ export default {
       }
     },
 
+    /**
+     * indicates which shapes are already used in the active diploTrans
+     * @return {[type]} [description]
+     */
+    indicateUsedShapes () {
+      const arr = [...this.$store.getters.activeDiploTransUsedShapes]
+      console.log('FacsimileComponent:indicateUsedShapes(): starting with this array:\n', arr)
+      const existingOverlay = this.$refs.container.querySelector('.svgContainer.shapes')
+
+      if (existingOverlay !== null) {
+        console.log('found an overlay')
+        existingOverlay.querySelectorAll('.activeWritingZone .usedShape').forEach(shape => {
+          const id = shape.getAttribute('data-id')
+          const index = arr.indexOf(id)
+          if (index === -1) {
+            console.log('removing usedShape from ' + id)
+            shape.classList.remove('usedShape')
+          } else {
+            arr.splice(index, 1)
+          }
+        })
+
+        console.log('\n\nNEED TO ADD in following array\n', arr)
+        arr.forEach(id => {
+          const elem = existingOverlay.querySelector('.activeWritingZone path[id="' + id + '"]')
+          if (elem) {
+            console.log('adding usedShape to ' + id)
+            elem.classList.add('usedShape')
+          } else {
+            console.log('unable to find element with id ' + id + '\n', this.$refs.container.querySelectorAll('path'))
+          }
+        })
+      }
+    },
+
     /**
      * renders system overlays
      * @return {[type]} [description]
@@ -1064,6 +1100,11 @@ export default {
         this.renderDiploTransOnPage()
       })
 
+    this.unwatchUsedShapes = this.$store.watch((state, getters) => getters.activeDiploTransUsedShapes,
+      (newArr, oldArr) => {
+        this.indicateUsedShapes()
+      })
+
     this.openFacsimile()
   },
   updated () {
@@ -1085,6 +1126,7 @@ export default {
         this.unwatchDiploTransOsdBounds()
         this.unwatchDiploTranscriptsOnCurrentPage()
       }
+      this.unwatchUsedShapes()
     } catch (err) {
       console.warn('FacsimileComponent:beforeUnmount(): ' + err, err)
     }
@@ -1250,6 +1292,16 @@ export default {
       opacity: 1;
       fill: $svgActiveWritingLayerColor;
       stroke: $svgActiveWritingLayerColor;
+
+      &.usedShape {
+        fill: $svgUsedShapeColor;
+        stroke: $svgUsedShapeColor;
+      }
+    }
+
+    .usedShape {
+      fill: $svgUsedShapeColor;
+      stroke: $svgUsedShapeColor;
     }
   }
 }
@@ -1357,7 +1409,7 @@ export default {
 
 .overlay.diploTrans {
   &.activeDiploTrans {
-    outline: 5px solid $svgActiveWritingLayerColor;
+    // outline: 5px solid $svgActiveWritingLayerColor;
   }
   g.staff > path {
     fill: $svgActiveWritingZoneColor; //transparent;

src/components/SliderInput.vue

@@ -8,7 +8,7 @@
       :min="min"
       :max="max"
       :step="step"
-      :disabled="readOnly"
+      :disabled="disabled"
       :style="{ background: 'linear-gradient(to right, #999 ' + percent + '%, #ccc ' + percent + '%)'}"/>
   </div>
 </template>
@@ -62,20 +62,43 @@ export default {
   },
   computed: {
     percent () {
-      const val = parseFloat(this.$store.getters[this.getterName])
+      let val
+
+      try {
+        if (this.idParam === 'undefined') {
+          val = parseFloat(this.$store.getters[this.getterName])
+        } else {
+          val = parseFloat(this.$store.getters[this.getterName](this.idParam))
+        }
+      } catch (e) {
+        val = parseFloat(this.$store.getters[this.getterName])
+      }
       const dist = this.max - this.min
       const pos = val - this.min
       const percent = parseInt(100 / dist * pos)
       return percent
     },
+    disabled () {
+      if (this.readOnly) {
+        return this.readOnly
+      }
+      return this.data === null || isNaN(this.data)
+    },
     data: {
       get () {
-        if (typeof this.getterName !== 'undefined') {
+        try {
+          // console.warn('----\nSliderInput\ngetterName: ', this.getterName, '\nidParam: ', this.idParam, '\nval: ', this.$store.getters[this.getterName](this.idParam))
+          if (this.getterName !== 'undefined' && this.idParam !== 'undefined') {
+            return parseFloat(this.$store.getters[this.getterName](this.idParam))
+          } else if (typeof this.getterName !== 'undefined') {
+            return parseFloat(this.$store.getters[this.getterName])
+          } else if (typeof this.val !== 'undefined') {
+            return parseFloat(this.val)
+          } else {
+            return parseFloat(this.$store.getters[this.getterName](this.idParam))
+          }
+        } catch (e) {
           return parseFloat(this.$store.getters[this.getterName])
-        } else if (typeof this.val !== 'undefined') {
-          return parseFloat(this.val)
-        } else {
-          return parseFloat(this.$store.getters[this.getterName](this.idParam))
         }
       },
       set (value) {
@@ -100,7 +123,7 @@ export default {
 
 }
 .simplifiedSlider {
-  width: 3em;
+  width: 3.6em;
   text-align: center;
   border: $lightBorder;
   border-radius: 3px;

src/components/XmlEditor.vue

@@ -6,6 +6,7 @@
       :autofocus="true"
       :indent-with-tab="true"
       :tab-size="2"
+      :disabled="disabled"
       :extensions="extensions"
     />
   </div>
@@ -47,6 +48,9 @@ export default {
         // console.log('changing editor to ', val)
         this.$store.dispatch('modifyXml', { filePath: this.filePath, id: this.id, val })
       }
+    },
+    disabled () {
+      return this.code === ''
     }
   }
 }

src/components/shared/VerovioComponent.vue

@@ -189,6 +189,11 @@ export default {
   max-height: 100%;
   overflow: auto;
 
+  svg *[data-corresp] {
+    fill: $svgUsedShapeColor;
+    stroke: $svgUsedShapeColor;
+  }
+
   svg .supplied {
     fill: $svgSuppliedColor;
     stroke: $svgSuppliedColor;

src/css/_variables.scss

@@ -30,4 +30,6 @@ $svgUnassignedShapeColor: #ff00ff;
 $svgActiveWritingZoneColor: $highlightColor06; //#468ffc;
 $svgActiveWritingLayerColor: $highlightColor05;
 
+$svgUsedShapeColor: rgb(0, 161, 46);
+
 $scoreHighlightedColor: $highlightColor01;