InitializeDTModal guess systemcount and rastrums

BeethovensWerkstatt · Oct 15, 2024 · df0c57a · df0c57a
1 parent bc1ad9c
commit df0c57a
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 28 deletions.
diff --git a/src/components/InitializeDTModal.vue b/src/components/InitializeDTModal.vue
@@ -1,28 +1,37 @@
 <template>
 
-<div class="modal" :class="{ active }" id="select-dt-systems-modal">
-   <a href="#close" @click="closeModal()" class="modal-overlay" aria-label="Close"></a>
-   <div class="modal-container">
-     <div class="modal-header">
-       <a href="#close" @click="closeModal()" class="btn btn-clear float-right" aria-label="Close"></a>
-       <div class="modal-title h5">Select Systems to include in DT</div>
-     </div>
-     <div class="modal-body">
-      <div v-for="(rastrum, i) in rastrumsOnCurrentPage" :key="i">
-        <span class="sysnum">{{ i+1 }}.:</span>
-        <input type="checkbox" :checked="systems[i + 1]" @change="toggle(i + 1)" />
-        {{ `${rastrum.x}, ${rastrum.y}` }}
+  <div class="modal" :class="{ active }" id="select-dt-systems-modal">
+    <a href="#close" @click="closeModal()" class="modal-overlay" aria-label="Close"></a>
+    <div class="modal-container">
+      <div class="modal-header">
+        <a href="#close" @click="closeModal()" class="btn btn-clear float-right" aria-label="Close"></a>
+        <div class="modal-title h5">Select Systems to include in DT</div>
+      </div>
+      <div class="modal-body">
+        <div>
+          <label for="dtsystemcount">Anzahl Systeme: </label>
+          <input type="number" :model="systemcount" min="1" :max="Math.max(1, rastrumcount)" ref="systemcount" id="dtsystemcount" />
+          <button class="btn" @click="$refs.systemcount.value = guessSystems()"><i class="icon icon-refresh"></i></button>
+        </div>
+        <div>
+          Systems
+          <button class="btn btn-clear" @click="rastrums = guessRastrums()"></button>
+        </div>
+        <div v-for="(rastrum, i) in rastrumsOnCurrentPage" :key="i">
+          <span class="sysnum">{{ i+1 }}.:</span>
+          <input type="checkbox" :checked="rastrums[i + 1]" @change="toggle(i + 1, rastrum)" :ref="'sel-' + rastrum.id" />
+          {{ `${rastrum.x}, ${rastrum.y}` }}<!-- <code>{{ rastrum.id }}</code> -->
+        </div>
+        <!-- <div>{{ rastrumlist }}</div> -->
+      </div>
+      <div class="modal-footer">
+        <div class="btn-group">
+          <button class="btn" @click="closeModal()">Cancel</button>
+          <button class="btn btn-primary" @click="main()">Select</button>
+        </div>
       </div>
-      <div>{{ systems }}</div>
     </div>
-     <div class="modal-footer">
-       <div class="btn-group">
-         <button class="btn" @click="closeModal()">Cancel</button>
-         <button class="btn btn-primary" @click="main()">Select</button>
-       </div>
-     </div>
-   </div>
- </div>
+  </div>
 
 </template>
 
@@ -31,27 +40,79 @@ import { mapGetters } from 'vuex'
 
 export default {
   name: 'InitializeDTModal',
-  data: () => ({
-    systems: {}
-  }),
   components: {
   },
+  props: {
+  },
+  watch: {
+    active () {
+      if (this.active) {
+        // start with at least 1 system
+        if (this.systemcount === 0 || !this.$refs.systemcount.value) {
+          this.systemcount = this.guessSystems()
+          this.$refs.systemcount.value = this.guessSystems()
+        }
+        // if nothing is selected yet guess rastrums
+        if (this.rastrumcount === 0) {
+          this.rastrums = this.guessRastrums()
+        }
+      }
+    },
+    activeWritingZone () {
+      // clear selections if WZ is changed
+      this.rastrums = this.guessRastrums()
+      const systemcount = this.guessSystems()
+      this.systemcount = systemcount
+      this.$refs.systemcount.value = systemcount
+    }
+  },
+  data: () => ({
+    systemcount: 0,
+    rastrums: {}
+  }),
   methods: {
     closeModal () {
       this.$store.dispatch('setModal', null)
     },
-    toggle (i) {
-      this.systems[i] = !this.systems[i]
+    toggle (i, rastrum) {
+      if (this.rastrums[i]) {
+        delete this.rastrums[i]
+      } else {
+        this.rastrums[i] = rastrum
+      }
     },
     main () {
-      console.log(Object.keys(this.systems).filter(k => this.systems[k]).map(k => +k))
+      console.log(this.systemcount, this.rastrumlist)
       this.$store.dispatch('setModal', null)
+    },
+    guessRastrums () {
+      const rastrums = {}
+      const affectedStaves = this.$store.getters.activeDiploTransAffectedStaves
+      // console.log(affectedStaves)
+      for (const { n, rastrum } of affectedStaves) {
+        // console.log(n, rastrum.id)
+        rastrums[n] = rastrum
+      }
+      return rastrums
+    },
+    guessSystems () {
+      const annotatedTranscript = this.$store.getters.annotatedTranscriptForCurrentWz
+      // console.log(annotatedTranscript)
+      const staffs = annotatedTranscript?.querySelectorAll('staffDef')
+      // console.log(staffs)
+      return staffs?.length || 1
     }
   },
   computed: {
-    ...mapGetters(['rastrumsOnCurrentPage']),
+    ...mapGetters(['rastrumsOnCurrentPage', 'activeWritingZone']),
     active () {
       return this.$store.getters.modal === 'initializeDT'
+    },
+    rastrumlist () {
+      return Object.keys(this.rastrums).filter(k => this.rastrums[k]).map(k => +k)
+    },
+    rastrumcount () {
+      return this.rastrumlist.length
     }
   }
 }

diff --git a/src/store/data/index.js b/src/store/data/index.js
@@ -3034,6 +3034,44 @@ const dataModule = {
         })
       })
       return arr
+    },
+
+    /**
+     * Return affected Staves/Rastrums for current writing zone.
+     * @param {*} state
+     * @param {*} getters
+     */
+    activeDiploTransAffectedStaves: (state, getters) => {
+      const currentWritingZoneObject = getters.currentWritingZoneObject
+      const rastrums = getters.rastrumsOnCurrentPage
+
+      // console.log('\n\ngot this:')
+      // console.log('currentWritingZoneObject', currentWritingZoneObject)
+      // console.log('rastrums', rastrums)
+      const wzBox = {
+        left: parseInt(currentWritingZoneObject.xywh.split(',')[0]),
+        top: parseInt(currentWritingZoneObject.xywh.split(',')[1]),
+        right: (parseInt(currentWritingZoneObject.xywh.split(',')[0]) + parseInt(currentWritingZoneObject.xywh.split(',')[2])),
+        bottom: (parseInt(currentWritingZoneObject.xywh.split(',')[1]) + parseInt(currentWritingZoneObject.xywh.split(',')[3]))
+      }
+
+      const affectedStaves = []
+      rastrums.forEach((rastrum, i) => {
+        const rastrumBox = {
+          left: parseInt(rastrum.px.x),
+          top: parseInt(rastrum.px.y),
+          right: (parseInt(rastrum.px.x) + parseInt(rastrum.px.w)),
+          bottom: (parseInt(rastrum.px.y) + parseInt(rastrum.px.h))
+        }
+        if (wzBox.top <= rastrumBox.top &&
+           wzBox.bottom >= rastrumBox.bottom &&
+           wzBox.left <= rastrumBox.right &&
+           wzBox.right >= rastrumBox.left) {
+          affectedStaves.push({ n: i + 1, rastrum })
+        }
+      })
+
+      return affectedStaves
     }
   }
 }