Merge branch 'feature-tianyong' into gym-online

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

@@ -1359,6 +1359,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);
     // 选段完成后，需要根据预报小节的速度，设置右下角显示的速度
@@ -1530,7 +1531,9 @@ const getMusicInfo = async (res: any) => {
 };
 //获取xml中的音轨数据
 function xmlToTracks(xmlString: string) {
+  //console.time('domparse')
   const xmlParse = new DOMParser().parseFromString(xmlString, "text/xml");
+  //console.timeEnd('domparse')
   const partNames = Array.from(xmlParse.getElementsByTagName('part-name'));
   return partNames.reduce((arr: string[], item) => {
     const textContent = item?.textContent?.trim()

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,MeasureNumberXMLList);
 		};
 		/** 是否可以点击音符 */
 		const disableClickNote = computed(() => {
@@ -301,7 +331,7 @@ export default defineComponent({
 							metronomeData.cursorMode === 2 &&
 							item.MeasureNumberXML === metronomeData.activeMetro?.measureNumberXML &&
 							state.times[state.activeNoteIndex].MeasureNumberXML === item.MeasureNumberXML;
-							//console.log('显示节拍指针',lineShow,state.times[state.activeNoteIndex].MeasureNumberXML,item.MeasureNumberXML,metronomeData.activeMetro?.measureNumberXML)
+							// console.log('显示节拍指针',lineShow,state.times[state.activeNoteIndex].MeasureNumberXML,item.MeasureNumberXML,metronomeData.activeMetro?.measureNumberXML)
 						return (
 							<>
 								{item.staveBox && (
@@ -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,