Quellcode durchsuchen

取消指法光标问题

liushengqiang vor 1 Jahr
Ursprung
Commit
b9afa6fc0e
3 geänderte Dateien mit 10 neuen und 11 gelöschten Zeilen
  1. 0 1
      src/page-instrument/view-detail/index.tsx
  2. 9 9
      src/state.ts
  3. 1 1
      src/view/selection/index.tsx

+ 0 - 1
src/page-instrument/view-detail/index.tsx

@@ -302,7 +302,6 @@ export default defineComponent({
 				if (state.fingeringInfo.direction === "vertical") {
 					nextTick(() => {
 						resetMusicScore();
-						recalculateNoteData();
 					});
 				}
 			}

+ 9 - 9
src/state.ts

@@ -1,5 +1,5 @@
 import { closeToast, showToast } from "vant";
-import { reactive } from "vue";
+import { nextTick, reactive } from "vue";
 import { OpenSheetMusicDisplay } from "../osmd-extended/src";
 import { metronomeData } from "./helpers/metronome";
 import { GradualNote, GradualTimes, GradualVersion } from "./type";
@@ -342,18 +342,18 @@ export const gotoCustomNote = (index: number) => {
 	}
 };
 const setCursorPosition = (note: any, cursor: any) => {
-	const scrollContainer = document.getElementById("scrollContainer");
-	const box = scrollContainer?.getBoundingClientRect();
-	if (!box) return;
 	if (
 		state.musicRenderType === EnumMusicRenderType.firstTone ||
 		state.musicRenderType === EnumMusicRenderType.fixedTone
 	) {
-		const noteBox = note?.svgElement.attrs.el
-			?.querySelector(".vf-numbered-note-head")
-			?.getBoundingClientRect();
-		if (!noteBox) return;
-		cursor.cursorElement.style.left = noteBox.x - box.x + "px";
+		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";
+			cursor.cursorElement.style.transform = `translateX(${width}px)`;
+		});
 	}
 };
 /** 跳转到下一个音符 */

+ 1 - 1
src/view/selection/index.tsx

@@ -256,7 +256,7 @@ export default defineComponent({
 				{selectData.notes.map((item: any) => {
 					return (
 						<div
-							class={[styles.position, disableClickNote.value && styles.disable, styles.note]}
+							class={[styles.position, disableClickNote.value && styles.disable, styles.note, `noteIndex_${item.index}`]}
 							style={item.bbox}
 							onClick={() => skipNotePlay(item.index)}
 						>