Merge branch 'feature-tianyong' into klx-test

osmd-extended

@@ -1 +1 @@
-Subproject commit 43dc4f3b6489924056a28b1c1c5a40771d150378
+Subproject commit 4ebb0ca539cdf162b77078d69830820764752a3d

src/helpers/metronome.ts

@@ -208,7 +208,8 @@ class Metronome {
 			return;
 		}
 		metronomeData.isClick = false;
-		if (currentTime === 0) {
+		// 非选段状态，没播放时，不显示节拍指针
+		if (currentTime === 0 && !state.sectionStatus) {
 			metronomeData.activeMetro = {}
 		}
 	};
@@ -460,7 +461,8 @@ class Metronome {
 						left: left?.indexOf("%") > -1 ? `calc(${left})` : left,
 						measureNumberXML: measure.measureNumberXML,
 						isRestFlag: measure.isRestFlag,
-						stepList: measure.stepList
+						stepList: measure.stepList,
+						isPercent: left?.indexOf("%") > -1, // 是否是根据小节宽度等分
 					});
 				}
 			}

src/state.ts

@@ -1383,6 +1383,7 @@ export const setSection = (start: number, end: number, userSpeed?: number) => {
 export const hanldeDirectSelection = (list: any[]) => {
   if (!Array.isArray(list) || list.length !== 2) return;
   state.sectionStatus = true;
+  metronomeData.activeIndex = null;
   setTimeout(() => {
     state.section = formateSelectMearure(list);
     // 选段完成后，需要根据预报小节的速度，设置右下角显示的速度

src/view/selection/index.tsx

@@ -28,8 +28,11 @@ export default defineComponent({
 			notes: [] as any[],
 			staves: [] as any[],
 			measureHeight: 0 as number, // 小节高度
+			// beatWidth: '100%' as string, // 节拍指针占用的宽度，带有拍号的小节，节拍指针占用的宽度需要减去拍号左侧的宽度
+			// beatLeft: 0 as number, // 小节有拍号时，拍号左侧宽度			
 		});
-		
+		const beatMeasureWidths: any = {}; // 节拍指针需要占用的宽度
+
 		/** 计算点击层数据 */
 		const calcNoteData = () => {
 			const musicContainer = document.getElementById("musicAndSelection")?.getBoundingClientRect() || {
@@ -112,7 +115,9 @@ export default defineComponent({
 						notesList.push(item.noteId);
 					}
 				}
-		
+				// 如果小节里面有拍号，需要减去拍号左侧的宽度
+				let beatWidth = '100%';
+				let beatLeft = 0;		
 				if (!MeasureNumberXMLList.includes(item.MeasureNumberXML)) {
 					if (item.stave) {
 						if (item.stave?.attrs?.id) {
@@ -132,6 +137,14 @@ export default defineComponent({
 							} catch (error) {}
 		
 							const staveBbox = staveEle?.getBoundingClientRect?.() || { x: 0, width: 0, y: 0, height: 0 };
+							const timesignatureDom = staveEle?.querySelector('.vf-timesignature') || staveEle?.querySelector('.vf-keysignature')
+							// 休止符才是根据小节宽度等分
+							if (timesignatureDom && item.measures.length == 1) {
+								const timesignatureBbox = timesignatureDom.getBoundingClientRect()
+								const leftWidth = timesignatureBbox.x + timesignatureBbox.width - staveBbox.x
+								beatLeft = leftWidth
+								beatWidth = `calc(100% - ${leftWidth+'px'})`
+							}							
 							if (i === 0) {
 								minMeasureHeigt = staveBbox.height
 							}
@@ -159,6 +172,10 @@ export default defineComponent({
 							selectData.staves.push(noteItem);
 						}
 						MeasureNumberXMLList.push(item.MeasureNumberXML);
+						beatMeasureWidths[item.MeasureNumberXML] = {
+							beatLeft,
+							beatWidth
+						}
 					} else {
 						if (item.multipleRestMeasures) {
 							if (state.isCombineRender) {
@@ -184,6 +201,10 @@ export default defineComponent({
 									};
 									selectData.staves.push(noteItem);
 									MeasureNumberXMLList.push(item.MeasureNumberXML);
+									beatMeasureWidths[item.MeasureNumberXML] = {
+										beatLeft,
+										beatWidth
+									}									
 								}
 							} else {
 								const preItem = selectData.staves.find(
@@ -198,6 +219,15 @@ export default defineComponent({
 									};
 									selectData.staves.push(noteItem);
 									MeasureNumberXMLList.push(item.MeasureNumberXML);
+									const preBeatMeasure = beatMeasureWidths[item.MeasureNumberXML-1]
+									beatMeasureWidths[item.MeasureNumberXML] = preBeatMeasure ?
+									{
+										beatLeft: preBeatMeasure.beatLeft,
+										beatWidth: preBeatMeasure.beatWidth
+									} : {
+										beatLeft,
+										beatWidth
+									}
 								}
 							}
 		
@@ -209,7 +239,7 @@ export default defineComponent({
 			if (selectData.staves[0]?.staveBox?.top !== selectData.staves[1]?.staveBox?.top) {
 				selectData.staves[0].staveBox.top = selectData.staves[1]?.staveBox?.top || selectData.staves[0]?.staveBox?.top
 			}
-			console.log("🚀 ~ selectData.notes:", selectData.notes, selectData.staves);
+			console.log("🚀 ~ selectData.notes:", selectData.notes, selectData.staves,beatMeasureWidths);
 		};
 		/** 是否可以点击音符 */
 		const disableClickNote = computed(() => {
@@ -324,7 +354,7 @@ export default defineComponent({
 										}}
 									>
 										{lineShow && (
-											<div style={{height: selectData.measureHeight + 'px', position: 'relative'}}>
+											<div style={{height: selectData.measureHeight + 'px', position: 'relative', width: metronomeData.activeMetro.isPercent ? beatMeasureWidths[item.MeasureNumberXML].beatWidth : '100%', left: metronomeData.activeMetro.isPercent ? beatMeasureWidths[item.MeasureNumberXML].beatLeft + 'px' : 0}}>
 												<div 
 												class={[
 													styles.line,