feat: 一行谱修改

src/state.ts

@@ -444,6 +444,8 @@ const state = reactive({
   audioDone: false,
   /** 谱面svgdom节点 */
   osmdSvgDom: null as any,
+  /** 滚动容器dom */
+  osdmScrollDom: null as any,
 });
 const browserInfo = browser();
 let offset_duration = 0;
@@ -692,6 +694,7 @@ export const gotoCustomNote = (index: number) => {
   } catch (error) {}
   for (let i = 0; i < index; i++) {
     state.osmd.cursor.next();
+    //moveSvgDom(50);
   }
 };
 const setCursorPosition = (note: any, cursor: any) => {
@@ -754,10 +757,12 @@ export const gotoNext = (note: any) => {
 
   if (prev && num - prev === 1) {
     osmd.cursor.next();
+    //moveSvgDom(50);
   } else if (prev && num - prev > 0) {
     while (num - prev > 0) {
       prev++;
       osmd.cursor.next();
+      //moveSvgDom(50);
     }
   } else {
     gotoCustomNote(num);
@@ -1207,9 +1212,13 @@ export const followBeatPaly = () => {
   });
 };
 
-// let moveX = 0;
-// /** 移动svgdom */
-// export const moveSvgDom = (offset: number) => {
-//   moveX += offset;
-//   state.osmdSvgDom.style.transform = `translateX(${moveX}px)`;
-// }
+let moveX = 0;
+/** 移动svgdom */
+export const moveSvgDom = (offset: number) => {
+  moveX += offset;
+  // state.osmdSvgDom.style.transform = `translateX(${moveX}px)`;
+  state.osdmScrollDom.scrollTo({
+    left: moveX,
+    behavior: "smooth",
+  });
+}

src/view/music-score/index.tsx

@@ -128,8 +128,10 @@ export default defineComponent({
 			await osmd.load(musicData.score);
 			osmd.zoom = state.zoom;
 			osmd.render();
-			const svg: any = document.getElementById("osmdSvgPage1");
-			state.osmdSvgDom = svg;
+			// const svg: any = document.getElementById("osmdSvgPage1");
+			// state.osmdSvgDom = svg;
+			const scrollDom = document.getElementById("musicAndSelection");
+			state.osdmScrollDom = scrollDom;
 			// console.log("🚀 ~ osmd:", osmd, svg)
 			emit("rendered", osmd);
 			resetFormate();