浏览代码

优化选段 小节颜色变化

黄琪勇 11 月之前
父节点
当前提交
c07910b8cc
共有 1 个文件被更改,包括 21 次插入3 次删除
  1. 21 3
      src/state.ts

+ 21 - 3
src/state.ts

@@ -1894,13 +1894,17 @@ watch(
     // console.log('选中的小节',matchMeasureNum,'需要减去的小节',needReduceMultipleRestNum,'当前的小节',state.activeMeasureIndex)
     state.vfmeasures.forEach((item: any, idx: number) => {
       const dataNum = item.getAttribute('data-num')  // 值可能为字符串类型的undefined
-      const measureNum = (dataNum && dataNum !== "undefined") ? Number(dataNum) : -1;
+      let measureNum = (dataNum && dataNum !== "undefined") ? Number(dataNum) : -1;
       let nextDataNum = state.vfmeasures[idx+1]?.getAttribute('data-num')
       // 当有换行小节,下个小节的nextDataNum是undefined,所以这里需要往后找一个
       if(!(nextDataNum && nextDataNum !== "undefined")){
         nextDataNum = state.vfmeasures[idx + 2]?.getAttribute('data-num')
       }
       const nextMeasureNum = Number(nextDataNum)
+      // 当measureNum 为undefined 则是下一个小节的换行小节,所以这里等于下一个小节
+      if(measureNum === -1) {
+        measureNum = nextMeasureNum
+      }
       if (measureNum >= 0 && (measureNum === state.activeMeasureIndex || (measureNum < state.activeMeasureIndex && nextMeasureNum > state.activeMeasureIndex))) {
         item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#132D4C")
         item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#040D1E")
@@ -1952,7 +1956,17 @@ watch(
       }
       state.vfmeasures.forEach((item: any, idx: number) => {
         const dataNum = item.getAttribute('data-num')  // 值可能为字符串类型的undefined
-        const measureNum = (dataNum && dataNum !== "undefined") ? Number(dataNum) : -1;
+        let measureNum = (dataNum && dataNum !== "undefined") ? Number(dataNum) : -1;
+        let nextDataNum = state.vfmeasures[idx+1]?.getAttribute('data-num')
+        // 当有换行小节,下个小节的nextDataNum是undefined,所以这里需要往后找一个
+        if(!(nextDataNum && nextDataNum !== "undefined")){
+          nextDataNum = state.vfmeasures[idx + 2]?.getAttribute('data-num')
+        }
+        const nextMeasureNum = Number(nextDataNum)
+        // 当measureNum 为undefined 则是下一个小节的换行小节,所以这里等于下一个小节
+        if(measureNum === -1) {
+          measureNum = nextMeasureNum
+        }
         // 小于选中置灰
         if (measureNum < leftMeasureNumberXML) {
           item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(96,159,207,0.5)")
@@ -1973,13 +1987,17 @@ watch(
       // 恢复选段前
       state.vfmeasures.forEach((item: any, idx: number) => {
         const dataNum = item.getAttribute('data-num')  // 值可能为字符串类型的undefined
-        const measureNum = (dataNum && dataNum !== "undefined") ? Number(dataNum) : -1;
+        let measureNum = (dataNum && dataNum !== "undefined") ? Number(dataNum) : -1;
         let nextDataNum = state.vfmeasures[idx+1]?.getAttribute('data-num')
         // 当有换行小节,下个小节的nextDataNum是undefined,所以这里需要往后找一个
         if(!(nextDataNum && nextDataNum !== "undefined")){
           nextDataNum = state.vfmeasures[idx + 2]?.getAttribute('data-num')
         }
         const nextMeasureNum = Number(nextDataNum)
+        // 当measureNum 为undefined 则是下一个小节的换行小节,所以这里等于下一个小节
+        if(measureNum === -1) {
+          measureNum = nextMeasureNum
+        }
         if (measureNum >= 0 && (measureNum === state.activeMeasureIndex || (measureNum < state.activeMeasureIndex && nextMeasureNum > state.activeMeasureIndex)) ) {
           item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#132D4C")
           item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#040D1E")