feat: 节拍指针位置优化

src/state.ts

@@ -1530,7 +1530,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,13 @@ export default defineComponent({
 							} catch (error) {}
 		
 							const staveBbox = staveEle?.getBoundingClientRect?.() || { x: 0, width: 0, y: 0, height: 0 };
+							const timesignatureDom = staveEle?.querySelector('.vf-timesignature')
+							if (timesignatureDom) {
+								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 +171,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 +200,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 +218,10 @@ export default defineComponent({
 									};
 									selectData.staves.push(noteItem);
 									MeasureNumberXMLList.push(item.MeasureNumberXML);
+									beatMeasureWidths[item.MeasureNumberXML] = {
+										beatLeft,
+										beatWidth
+									}
 								}
 							}
 		
@@ -209,7 +233,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(() => {
@@ -324,7 +348,7 @@ export default defineComponent({
 										}}
 									>
 										{lineShow && (
-											<div style={{height: selectData.measureHeight + 'px', position: 'relative'}}>
+											<div style={{height: selectData.measureHeight + 'px', position: 'relative', width: beatMeasureWidths[item.MeasureNumberXML].beatWidth, left: beatMeasureWidths[item.MeasureNumberXML].beatLeft + 'px'}}>
 												<div 
 												class={[
 													styles.line,