选段 颜色修改

src/state.ts

@@ -1568,34 +1568,110 @@ export const moveSvgDom = (skipNote?: boolean) => {
   }
 }
 
+/* 根据当前的小节获取前面有多少需要去除的合并小节 */
+function getNeedReduceMultipleRestNum(currMeasureIndex:number){
+  let needReduceMultipleRestNum = 0;
+  for(let noteIndex = 0; noteIndex < state.times.length; noteIndex++){
+    const note =  state.times[noteIndex];
+    if (note.MeasureNumberXML > currMeasureIndex) {
+      break;
+    }
+    if (note.multipleRestMeasures && note.multipleRestMeasures > 1) {
+      needReduceMultipleRestNum += 1;
+    }
+  }
+  return needReduceMultipleRestNum
+}
+
 watch(
 	() => state.activeMeasureIndex,
 	() => {
     // 需要减去的合并小节数
-    let needReduceMultipleRestNum = 1;
-    for(let noteIndex = 0; noteIndex < state.times.length; noteIndex++){
-      const note =  state.times[noteIndex];
-      if (note.MeasureNumberXML > state.activeMeasureIndex) {
-        break;
-      }
-      // 合并的小节数+1
-      // if (note.multipleRestMeasures && (note.multipleRestMeasures > 1 || (note.multipleRestMeasures === 1 && note.MeasureNumberXML === 1))) {
-      //   needReduceMultipleRestNum += 1;
-      // }
-      if (note.multipleRestMeasures && note.multipleRestMeasures > 1) {
-        needReduceMultipleRestNum += 1;
-      }
-    }
-    const matchMeasureNum = state.activeMeasureIndex - needReduceMultipleRestNum
+    const needReduceMultipleRestNum = getNeedReduceMultipleRestNum(state.activeMeasureIndex)
+    const matchMeasureNum = state.activeMeasureIndex - needReduceMultipleRestNum - 1
     console.log('选中的小节',matchMeasureNum,'需要减去的小节',needReduceMultipleRestNum,'当前的小节',state.activeMeasureIndex)
     state.vfmeasures.forEach((item: any, idx: number) => {
       if (idx === matchMeasureNum) {
         item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#132D4C")
         item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#040D1E")
       } else {
-        item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#609FCF")
-        item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#2B70A5")
+        // 有选段只清除选段处的
+        if(state.section.length === 2){
+          // 把中间置灰
+          let leftMeasureNumberXML = state.section[0].MeasureNumberXML
+          let rightMeasureNumberXML = state.section[1].MeasureNumberXML
+          if(leftMeasureNumberXML > rightMeasureNumberXML){
+            leftMeasureNumberXML = state.section[1].MeasureNumberXML
+            rightMeasureNumberXML = state.section[0].MeasureNumberXML
+          }
+          const leftVfmeasuresIndex = leftMeasureNumberXML - getNeedReduceMultipleRestNum(leftMeasureNumberXML) - 1
+          const rightVfmeasuresIndex = rightMeasureNumberXML - getNeedReduceMultipleRestNum(rightMeasureNumberXML) - 1
+          if(idx >= leftVfmeasuresIndex && idx <= rightVfmeasuresIndex){
+            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#609FCF")
+            item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#2B70A5")
+          }
+          // 预备小节
+          if(state.sectionFirst){
+            const sectionFirstVfmeasuresIndex = state.sectionFirst.MeasureNumberXML - getNeedReduceMultipleRestNum(state.sectionFirst.MeasureNumberXML) - 1
+            const sectionFirstDom = state.vfmeasures[sectionFirstVfmeasuresIndex]
+            sectionFirstDom?.querySelector('.vf-custom-bg')?.setAttribute("fill", "#71B8BD")
+            sectionFirstDom?.querySelector('.vf-custom-bot')?.setAttribute("fill", "#448F9C")
+          }
+        }else{
+          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#609FCF")
+          item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#2B70A5")
+        }
       }
     })
 	}
-);
+);    
+
+
+
+watch(
+  () => state.section,
+  () => {
+    if(state.section.length === 2){
+      // 把前面和 后面置灰
+      let leftMeasureNumberXML = state.section[0].MeasureNumberXML
+      let rightMeasureNumberXML = state.section[1].MeasureNumberXML
+      if(leftMeasureNumberXML > rightMeasureNumberXML){
+        leftMeasureNumberXML = state.section[1].MeasureNumberXML
+        rightMeasureNumberXML = state.section[0].MeasureNumberXML
+      }
+      const leftVfmeasuresIndex = leftMeasureNumberXML - getNeedReduceMultipleRestNum(leftMeasureNumberXML) - 1
+      const rightVfmeasuresIndex = rightMeasureNumberXML - getNeedReduceMultipleRestNum(rightMeasureNumberXML) - 1
+      state.vfmeasures.forEach((item: any, idx: number) => {
+        // 小于选中置灰
+        if (idx < leftVfmeasuresIndex) {
+          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(96,159,207,0.5)")
+          item.querySelector('.vf-custom-bot')?.setAttribute("fill", "rgba(43,112,165,0.5)")
+        }
+        // 大于选中置灰
+        if(idx > rightVfmeasuresIndex){
+          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(96,159,207,0.5)")
+          item.querySelector('.vf-custom-bot')?.setAttribute("fill", "rgba(43,112,165,0.5)")
+        }
+      })
+      // 预备小节
+      if(state.sectionFirst){
+        const sectionFirstVfmeasuresIndex = state.sectionFirst.MeasureNumberXML - getNeedReduceMultipleRestNum(state.sectionFirst.MeasureNumberXML) - 1
+        const sectionFirstDom = state.vfmeasures[sectionFirstVfmeasuresIndex]
+        sectionFirstDom?.querySelector('.vf-custom-bg')?.setAttribute("fill", "#71B8BD")
+        sectionFirstDom?.querySelector('.vf-custom-bot')?.setAttribute("fill", "#448F9C")
+      }
+    }else{
+      // 恢复选段前
+      const matchMeasureNum = state.activeMeasureIndex - getNeedReduceMultipleRestNum(state.activeMeasureIndex) - 1
+      state.vfmeasures.forEach((item: any, idx: number) => {
+        if (idx === matchMeasureNum) {
+          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#132D4C")
+          item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#040D1E")
+        } else {
+          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#609FCF")
+          item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#2B70A5")
+        }
+      })
+    }
+  }
+)

src/view/selection/index.module.less

@@ -16,10 +16,6 @@
     // background: rgba(0,0,0,0.3);
 }
 
-.prepareStaveBox {
-    background-color: rgba(113,184,189, 0.7);
-}
-
 .selectBox{
     position: absolute;
     width: 3Px;

src/view/selection/index.tsx

@@ -173,19 +173,6 @@ export default defineComponent({
 		const disableClickNote = computed(() => {
 			return state.sectionStatus || state.modeType !== "practise";
 		});
-		const showClass = computed(() => {
-			return (item: any) => {
-				if (state.sectionStatus) {
-					if (state.section.length === 2) {
-						// 选段预备拍背景
-						if (state.sectionFirst && item.MeasureNumberXML === state.sectionFirst.MeasureNumberXML) {
-							item.staveBox.height = selectData.measureHeight + 'px';
-							return styles.prepareStaveBox;
-						}
-					}
-				}
-			};
-		});
 		// 选段符号
 		const sectionPosData = computed(() => {
 			if(state.sectionStatus) {
@@ -256,7 +243,6 @@ export default defineComponent({
 								<div
 									class={[
 										styles.position,
-										showClass.value(item),
 										scoreItem ? `scoreItemLeve${scoreItem.leve}` : "",
 										item.multipleRestMeasures <= 1 ? styles.staveBg : "",
 										(state.platform === IPlatform.PC && state.zoom > 0.8) ? styles.linePC : '',
@@ -323,6 +309,7 @@ export default defineComponent({
 							item && <div class={styles.selectBox} style={item}>
 								<div class={[styles.selectHandle,index>0&&styles.selectHandleRight,state.playState==="play"&&styles.playIng]} onClick={()=>{
 									state.section.splice(index,1)
+									state.section = [...state.section]  // 触发 watch
 								}}></div>
 							</div>
 						)