feat: 滑音点击区域修改

osmd-extended

@@ -1 +1 @@
-Subproject commit 1b7f34674ecc1195c5c03e0af63f5983b424aab3
+Subproject commit 89ccb5473c28dc3e24f256980eff8633f0a6365b

src/view/selection/index.tsx

@@ -55,7 +55,7 @@ const calcNoteData = () => {
 				const noteEle = document.querySelector(`#vf-${item.svgElement?.attrs?.id}`);
 
 				if (noteEle) {
-					const noteBbox = noteEle.getBoundingClientRect?.() || { x: 0, width: 0 };
+					let noteBbox = noteEle.getBoundingClientRect?.() || { x: 0, width: 0 };
 					if (state.musicRenderType !== EnumMusicRenderType.staff) {
 						noteItem.bbox = {
 							left: noteBbox.x - parentLeft - noteBbox.width / 4 + "px",
@@ -81,11 +81,13 @@ const calcNoteData = () => {
 					} else {
 						// 判断是否是滑音，滑音的宽度很大，会覆盖掉前面的音符区域，导致无法点击选中前一个音符，需要缩小滑音的点击区域
 						let vibratoReduceX = 0;
-						// if (noteEle?.querySelector('.vf-vibrato')) {
-						// 	vibratoReduceX = 50;
-						// } else {
-						// 	vibratoReduceX = 0;
-						// }
+						if (noteEle?.querySelector('.vf-vibrato') && noteEle?.querySelector(".vf-note")) {
+							// vibratoReduceX = 50;
+							// @ts-ignore
+							noteBbox = noteEle.querySelector(".vf-note")?.getBoundingClientRect?.() || { x: 0, width: 0 };
+						} else {
+							vibratoReduceX = 0;
+						}
 						const needTransY = -(staveBbox.height - customBgBox.height) / 2 + "px";
 						noteItem.bbox = {
 							left: noteBbox.x - parentLeft - noteBbox.width / 4 + vibratoReduceX + "px",