光标显示

src/state.ts

@@ -347,11 +347,10 @@ const setCursorPosition = (note: any, cursor: any) => {
 		state.musicRenderType === EnumMusicRenderType.fixedTone
 	) {
 		nextTick(() => {
-			const noteEl = document.querySelector(`.noteIndex_${note.i}`) as HTMLElement;
-			if (!noteEl) return;
-			// console.log(noteEl.offsetLeft , noteEl.offsetWidth)
-			const width = (noteEl.offsetWidth - 18) / 3;
-			cursor.cursorElement.style.left = noteEl.offsetLeft + "px";
+			const bbox = note.bbox;
+			if (!bbox) return;
+			const width = (bbox.width - 18) / 3;
+			cursor.cursorElement.style.left = bbox.left + "px";
 			cursor.cursorElement.style.transform = `translateX(${width}px)`;
 		});
 	}

src/view/selection/index.tsx

@@ -56,6 +56,15 @@ const calcNoteData = () => {
 							width: noteBbox.width * 1.5 + "px",
 							height: noteBbox.height * 3 + "px",
 						};
+						const noteHead = noteEle.querySelector(".vf-numbered-note-head");
+						const noteHeadBbox = noteHead?.getBoundingClientRect?.();
+						if  (noteHeadBbox) {
+							item.bbox = {
+								left: noteHeadBbox.x - parentLeft - noteHeadBbox.width / 4,
+								width: noteHeadBbox.width * 1.5,
+							}
+						}
+						
 					} else {
 						noteItem.bbox = {
 							left: noteBbox.x - parentLeft - noteBbox.width / 4 + "px",