fix: #9877

src/state.ts

@@ -803,6 +803,7 @@ export const handleChangeSection = () => {
     togglePlay("paused");
     skipNotePlay(0, true);
     clearSelection();
+    state.sectionFirst = null;
     return;
   }
   state.sectionStatus = true;

src/view/selection/index.tsx

@@ -26,6 +26,7 @@ const calcNoteData = () => {
 	const notes = state.times;
 	const notesList: string[] = [];
 	const MeasureNumberXMLList: number[] = [];
+	let minMeasureHeigt: number = 0;
 	for (let i = 0; i < notes.length; i++) {
 		const item = notes[i];
 		// console.log("🚀 ~ item:", item)
@@ -43,7 +44,7 @@ const calcNoteData = () => {
 					x: 0,
 					width: 0,
 				};
-				// console.log("🚀 ~ staveBbox:", staveBbox)
+				// console.log("🚀 ~ staveBbox:", staveBbox.height)
 			}
 			if (item.svgElement) {
 				const noteEle = document.querySelector(`#vf-${item.svgElement?.attrs?.id}`);
@@ -105,6 +106,9 @@ const calcNoteData = () => {
 					} catch (error) {}
 
 					const staveBbox = staveEle?.getBoundingClientRect?.() || { x: 0, width: 0, y: 0, height: 0 };
+					if (i === 0) {
+						minMeasureHeigt = staveBbox.height
+					}
 					try {
 						if (list.length) {
 							list.forEach((_el: any) => {
@@ -113,14 +117,16 @@ const calcNoteData = () => {
 						}
 					} catch (error) {}
 
-					// console.log("🚀 ~ staveEle:", staveBbox)
+					// console.log("🚀 ~ staveEle:", staveBbox.height)
 					selectData.measureHeight = staveBbox.height
+					let compareVal = staveBbox.height - minMeasureHeigt
+					compareVal = compareVal > 0 ? compareVal : 0
 					noteItem.staveBox = {
 						left: staveBbox.x - parentLeft + "px",
 						// top: ((item.stave.y || 0) - 5) * state.zoom + "px",
-						top: staveBbox.y - parentTop + "px",
+						top: staveBbox.y - parentTop + compareVal + "px",
 						width: staveBbox.width + "px",
-						height: staveBbox.height + "px",
+						height: staveBbox.height - compareVal + "px",
 						// background: 'rgba(0,0,0,.2)'
 					};
 					selectData.staves.push(noteItem);