|
@@ -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")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+)
|