initial xml editor for diploTrans

src/components/DiploTab.vue

@@ -32,9 +32,9 @@
           <!--<VerovioComponent purpose="transcribing" type="diploTrans" getter="diplomaticTranscriptForCurrentWz" pathGetter="currentWzDtPath"/>-->
           <!--<OpenSeadragonComponent/>-->
         </div>
-        <!--<div class="mainBox">
-          <code>XML Editor goes here</code>
-        </div>-->
+        <div class="mainBox">
+          <XmlEditor :filePath="editorSettings.filePath" :id="editorSettings.id"/>
+        </div>
         <div class="mainBox">
           <VerovioComponent purpose="transcribing" type="annotTrans" getter="annotatedTranscriptForCurrentWz" pathGetter="currentWzAtPath"/>
         </div>
@@ -55,6 +55,7 @@ import WritingZoneDirectory from '@/components/WritingZoneDirectory.vue'
 
 import FacsimileComponent from '@/components/FacsimileComponent.vue'
 import VerovioComponent from '@/components/shared/VerovioComponent.vue'
+import XmlEditor from '@/components/XmlEditor.vue'
 
 export default {
   name: 'DiploTab',
@@ -66,7 +67,8 @@ export default {
     SourceSelector,
     WritingZoneDirectory,
     FacsimileComponent,
-    VerovioComponent
+    VerovioComponent,
+    XmlEditor
   },
   methods: {
     toggleSidebar () {
@@ -148,7 +150,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['diploTabSidebarVisible', 'diploTransActivationsInShapes', 'diploTransActivationsInAnnotTrans', 'diplomaticTranscriptsOnCurrentPage']),
+    ...mapGetters(['diploTabSidebarVisible', 'diploTransActivationsInShapes', 'diploTransActivationsInAnnotTrans', 'diplomaticTranscriptsOnCurrentPage', 'activeDiploTransElementId']),
     showInitializeButton () {
       const currentWz = this.$store.getters.currentWritingZoneObject
       if (!currentWz) {
@@ -161,6 +163,12 @@ export default {
       const annotTransAvailable = this.$store.getters.availableAnnotatedTranscripts.indexOf(annotTransLink) !== -1
       const diploTransAvailable = this.$store.getters.availableDiplomaticTranscripts.indexOf(diploTransLink) !== -1
       return annotTransAvailable && !diploTransAvailable
+    },
+    editorSettings () {
+      return {
+        filePath: this.$store.getters.currentWritingZoneObject?.diploTrans,
+        id: this.$store.getters.activeDiploTransElementId
+      }
     }
   },
   created () {
@@ -305,7 +313,7 @@ i.showSidebar {
 }
 
 .mainBox {
-  height: 33%;
+  height: 25%;
   padding: .5rem;
 }
 

src/components/FacsimileComponent.vue

@@ -28,6 +28,30 @@ const osdOptions = {
   silenceMultiImageWarnings: true
 }
 
+const rawSelectables = [
+  'note',
+  'chord',
+  'syl',
+  'rest',
+  'beam',
+  'artic',
+  'accid',
+  'clef',
+  'slur',
+  'dynam',
+  'dir',
+  'keySig',
+  'meterSig',
+  'barLine'
+  // 'staff',
+  // 'measure'
+]
+let selectables = []
+rawSelectables.forEach(elem => {
+  selectables.push('.' + elem + ':not(.bounding-box)')
+})
+selectables = selectables.join(', ')
+
 export default {
   name: 'FacsimileComponent',
   props: {
@@ -143,7 +167,7 @@ export default {
       click.page = clickedPagePos
       // }
 
-      // console.log(click)
+      console.log('-------------\n\nCLICK\n\n------------\n', click)
 
       // check for click to svg shape
       if (click.target.localName === 'path') {
@@ -157,6 +181,17 @@ export default {
         this.$store.dispatch('setActiveSystem', id)
       }
 
+      if (click.target.closest('.diploTrans') && click.target.closest('.measure')) {
+        const wzId = click.target.closest('.diploTrans').getAttribute('data-diploTrans')
+        const target = click.target.closest(selectables)
+        if (target) {
+          const id = target.getAttribute('data-id')
+          this.$store.dispatch('setActiveWritingZone', wzId)
+          this.$store.dispatch('setActiveDiploTransElementId', id)
+          console.log('selecting activeDiploTransElementId: ', id)
+        }
+      }
+
       /*
       const counterRotate = this.viewer.viewport.getRotation()// this.tileSource.degrees * -1
       const center = { x: 0, y: 0 }
@@ -822,6 +857,7 @@ export default {
               element.classList.add('activeDiploTrans')
             }
             element.setAttribute('data-diploTrans', dt.wzDetails.id)
+            element.setAttribute('data-filePath', dt.wzDetails.diploTrans)
             element.append(diplo)
 
             /* const x = viewBox.split(' ')[0]

src/components/XmlEditor.vue

@@ -13,6 +13,7 @@
 
 <script>
 import { Codemirror } from 'vue-codemirror'
+import { EditorView } from '@codemirror/view'
 // import { javascript } from '@codemirror/lang-javascript'
 import { xml } from '@codemirror/lang-xml'
 import { oneDark } from '@codemirror/theme-one-dark'
@@ -21,11 +22,15 @@ import { oneDark } from '@codemirror/theme-one-dark'
 
 export default {
   name: 'XmlEditor',
+  props: {
+    filePath: String,
+    id: String
+  },
   components: {
     Codemirror
   },
   data: () => {
-    const extensions = [xml(), oneDark]
+    const extensions = [xml(), oneDark, EditorView.lineWrapping]
     return {
       extensions,
       log: console.log
@@ -36,11 +41,11 @@ export default {
   computed: {
     code: {
       get () {
-        return this.$store.getters.xmlCode
+        return this.$store.getters.xmlSnippet({ filePath: this.filePath, id: this.id })
       },
       set (val) {
         // console.log('changing editor to ', val)
-        this.$store.dispatch('setXmlByEditor', val)
+        this.$store.dispatch('modifyXml', { filePath: this.filePath, id: this.id, val })
       }
     }
   }

src/store/data/index.js

@@ -14,6 +14,12 @@ import { rotatePoint } from '@/tools/trigonometry'
  */
 const parser = new DOMParser()
 
+/**
+ * An XML Serializer for converting back to string
+ * @type {XMLSerializer}
+ */
+const serializer = new XMLSerializer()
+
 /**
  * @namespace store.data
  */
@@ -25,7 +31,9 @@ const dataModule = {
    */
   state: {
     documents: {},
-    documentNamePathMapping: []
+    documentNamePathMapping: [],
+    temporaryXMLCode: '',
+    isWellformed: true
   },
 
   /**
@@ -59,6 +67,24 @@ const dataModule = {
 
     ADD_REFERENCE_TO_SVG_FILE_FOR_SURFACE (state, { path, modifiedDom }) {
       state.documents[path] = modifiedDom
+    },
+
+    /**
+     * sets whether the current XML code is wellformed
+     * @param {*} state
+     * @param {*} bool
+     */
+    SET_IS_WELLFORMED (state, bool) {
+      state.isWellformed = bool
+    },
+
+    /**
+     * sets the temporary (invalid) XML code
+     * @param {*} state
+     * @param {*} string
+     */
+    SET_TEMPORARY_XML_CODE (state, string) {
+      state.temporaryXMLCode = string
     }
   },
 
@@ -1450,6 +1476,37 @@ const dataModule = {
 
       dispatch('loadDocumentIntoStore', { path: atPath, dom: atDoc })
       dispatch('logChange', { path: atPath, baseMessage, param, xmlIDs: [annotElemRef.id], isNewDocument: false })
+    },
+
+    modifyXml ({ commit, getters, state, dispatch }, { filePath, id, val }) {
+      const snippet = parser.parseFromString(val, 'application/xml')
+
+      const errorNode = snippet.querySelector('parsererror')
+      if (errorNode) {
+        console.log('error while parsing')
+        commit('SET_IS_WELLFORMED', false)
+        commit('SET_TEMPORARY_XML_CODE', val)
+        return
+      } else {
+        commit('SET_IS_WELLFORMED', true)
+        commit('SET_TEMPORARY_XML_CODE', '')
+      }
+
+      const file = getters.documentByPath(filePath).cloneNode(true)
+      const elem = file.querySelector('*[*|id="' + id + '"]')
+
+      if (!elem) {
+        console.error('@/store/data/index.js:modifyXml(): No element found with ID "#' + id + '" in file "' + filePath + '"') // eslint-disable-line no-console
+        return
+      }
+
+      elem.replaceWith(snippet.documentElement)
+
+      const baseMessage = 'manually adjust XML for '
+      const param = '//' + elem.localName + '#' + id
+
+      dispatch('loadDocumentIntoStore', { path: filePath, dom: file })
+      dispatch('logChange', { path: filePath, baseMessage, param, xmlIDs: [id], isNewDocument: false })
     }
   },
 
@@ -2769,6 +2826,36 @@ const dataModule = {
       })
 
       return arr
+    },
+
+    /**
+     * getter for the XML code for the current page
+     * @param  {Object} state store
+     * @return {string} MEI serialized to string
+     */
+    xmlSnippet: (state, getters) => ({ filePath, id }) => {
+      if (!filePath || !id) {
+        return ''
+      }
+
+      const doc = getters.documentByPath(filePath)
+      if (!doc) {
+        return ''
+      }
+
+      if (!state.isWellformed) {
+        return state.temporaryXMLCode
+      }
+
+      const elem = doc.querySelector('*[*|id="' + id + '"]')
+
+      if (!elem) {
+        return ''
+      }
+
+      // console.log('found elem:\n', elem)
+
+      return serializer.serializeToString(elem)
     }
   }
 }

src/store/gui/index.js

@@ -78,7 +78,8 @@ const guiModule = {
       annotTrans: new Map()
     },
     diploTransSelectedId: null,
-    diploTransOsdBounds: null
+    diploTransOsdBounds: null,
+    activeDiploTransElementId: null
   },
   /**
    * @namespace store.gui.mutations
@@ -374,6 +375,15 @@ const guiModule = {
      */
     SET_DIPLOTRANS_OSD_BOUNDS (state, obj) {
       state.diploTransOsdBounds = obj
+    },
+
+    /**
+     * sets the ID of the active element in the diplomatic transcription
+     * @param {*} state
+     * @param {*} id
+     */
+    SET_ACTIVE_DIPLO_TRANS_ELEMENT_ID (state, id) {
+      state.activeDiploTransElementId = id
     }
   },
   /**
@@ -647,6 +657,14 @@ const guiModule = {
      */
     setDiploTransOsdBounds ({ commit }, { originOsd, bounds }) {
       commit('SET_DIPLOTRANS_OSD_BOUNDS', { originOsd, bounds })
+    },
+
+    /**
+     * sets the ID of the active element in the diplomatic transcription
+     * @param {*} id
+     */
+    setActiveDiploTransElementId ({ commit }, id) {
+      commit('SET_ACTIVE_DIPLO_TRANS_ELEMENT_ID', id)
     }
   },
   /**
@@ -985,6 +1003,15 @@ const guiModule = {
      */
     diploTransOsdBounds: (state) => {
       return state.diploTransOsdBounds
+    },
+
+    /**
+     * returns the ID of the currently active element in the diplomatic transcription
+     * @param {*} state
+     * @returns
+     */
+    activeDiploTransElementId: (state) => {
+      return state.activeDiploTransElementId
     }
   }
 }