fix

src/view/selection/index.tsx

@@ -30,7 +30,7 @@ export default defineComponent({
 					staveBox: null as any,
 				};
 				if (!notesList.includes(item.noteId)) {
-					let staveBbox: any = {}
+					let staveBbox: any = {};
 					if (item.stave?.attrs?.id) {
 						const staveEle = document.querySelector(`#${item.stave.attrs.id}`);
 						staveBbox = staveEle?.parentElement?.parentElement?.getBoundingClientRect?.() || { x: 0, width: 0 };
@@ -38,7 +38,7 @@ export default defineComponent({
 					}
 					if (item.svgElement) {
 						const noteEle = document.querySelector(`#vf-${item.svgElement?.attrs?.id}`);
-						
+
 						if (noteEle) {
 							const noteBbox = noteEle.getBoundingClientRect?.() || { x: 0, width: 0 };
 							noteItem.bbox = {
@@ -57,12 +57,33 @@ export default defineComponent({
 					if (item.stave) {
 						if (item.stave?.attrs?.id) {
 							const staveEle = document.querySelector(`#${item.stave.attrs.id}`);
-							const staveBbox = staveEle?.getBoundingClientRect?.() || { x: 0, width: 0 };
+							const list = [Array.from(staveEle?.querySelectorAll(".vf-clef") || []), Array.from(staveEle?.querySelectorAll(".vf-keysignature") || [])].flat();
+							try {
+								if (list.length) {
+									// console.log("🚀 ~ list:", list)
+									list.forEach((_el: any) => {
+										_el?.style?.setProperty("display", "none");
+									});
+								}
+							} catch (error) {}
+
+							const staveBbox = staveEle?.getBoundingClientRect?.() || { x: 0, width: 0, y: 0, height: 0 };
+							try {
+								if (list.length) {
+									list.forEach((_el: any) => {
+										_el?.style?.removeProperty("display");
+									});
+								}
+							} catch (error) {}
+
+							// console.log("🚀 ~ staveEle:", staveEle)
 							noteItem.staveBox = {
 								left: staveBbox.x - parentLeft + "px",
-								top: ((item.stave.y || 0) - 5) * state.zoom + "px",
+								// top: ((item.stave.y || 0) - 5) * state.zoom + "px",
+								top: staveBbox.y - parentTop + "px",
 								width: staveBbox.width + "px",
-								height: 50 * state.zoom + "px",
+								height: staveBbox.height + "px",
+								// background: 'rgba(0,0,0,.2)'
 							};
 							selectData.staves.push(noteItem);
 						}
@@ -87,8 +108,8 @@ export default defineComponent({
 		};
 		/** 是否可以点击音符 */
 		const disableClickNote = computed(() => {
-			return state.sectionStatus || state.modeType !== 'practise'
-		})
+			return state.sectionStatus || state.modeType !== "practise";
+		});
 		const showClass = computed(() => {
 			return (item: any) => {
 				if (state.sectionStatus) {