一行谱 谱面移动修复bug

src/page-instrument/view-detail/smoothAnimation/index.ts

@@ -17,6 +17,8 @@ type smoothAnimationType = {
    smoothBotDom: null | HTMLElement
    osmdCanvasPageDom: null | HTMLElement
    osdmScrollDom: null | HTMLElement
+   osdmScrollDomWith: number
+   selectionBoxDom: null | HTMLElement
    pointsPos: pointsPosType
    translateXNum: number
    aveSpeed: number
@@ -35,6 +37,8 @@ export const smoothAnimationState = {
    smoothBotDom: null,
    osmdCanvasPageDom: null,
    osdmScrollDom: null,
+   osdmScrollDomWith: 0,
+   selectionBoxDom: null,
    pointsPos: [], // 计算之后的点坐标数组
    translateXNum: 0, // 当前谱面的translateX的距离   谱面的位置信息 由translateX和scrollLeft的偏移一起决定
    aveSpeed: 0, // 谱面的一帧的平均速度
@@ -45,7 +49,7 @@ export const smoothAnimationState = {
 watch(smoothAnimationState.isShow, () => {
    if (smoothAnimationState.isShow.value) {
       smoothAnimationState.smoothAnimationBoxDom?.classList.remove("smoothAnimationBoxHide")
-      moveSmoothAnimation(moveState.progress, moveState.activeIndex)
+      //moveSmoothAnimation(moveState.progress, moveState.activeIndex)
    } else {
       smoothAnimationState.smoothAnimationBoxDom?.classList.add("smoothAnimationBoxHide")
    }
@@ -159,6 +163,13 @@ export function moveSmoothAnimation(progress: number, activeIndex: number) {
       smoothAnimationState.pointsPos,
       smoothAnimationState.pointsPos.slice(0, nowIndex)
    )
+   // 当移动到屏幕最右边时候 就不进行移动了
+   if (
+      (smoothAnimationState.osdmScrollDom?.scrollLeft || 0) + smoothAnimationState.translateXNum + smoothAnimationState.osdmScrollDomWith >
+      smoothAnimationState.canvasDomWith
+   ) {
+      return
+   }
    move_osmd(nowPointsPos)
 }
 
@@ -213,7 +224,16 @@ function move_osmd(nowPointsPos: pointsPosType[0]) {
    } else if (midBotNum > clientMidWidth + clientWidth * 0.45 && midBotNum <= clientMidWidth + clientWidth * 0.5) {
       smoothAnimationState.translateXNum += speed * 5
    }
-   smoothAnimationState.osmdCanvasPageDom!.style.transform = `translateX(-${smoothAnimationState.translateXNum}px)`
+   moveTranslateXNum(smoothAnimationState.translateXNum)
+}
+
+/**
+ * 根据 translateXNum 滚动到位置
+ */
+
+export function moveTranslateXNum(translateXNum: number) {
+   smoothAnimationState.osmdCanvasPageDom && (smoothAnimationState.osmdCanvasPageDom.style.transform = `translateX(-${translateXNum}px)`)
+   smoothAnimationState.selectionBoxDom && (smoothAnimationState.selectionBoxDom.style.transform = `translateX(-${translateXNum}px)`)
 }
 
 /**
@@ -236,9 +256,15 @@ function createSmoothAnimation() {
    // osdmScrollDom
    const osdmScrollDom = document.querySelector("#musicAndSelection") as HTMLElement
    smoothAnimationState.osdmScrollDom = osdmScrollDom
+   smoothAnimationState.osdmScrollDomWith = osdmScrollDom?.offsetWidth | 0
    // osmdCanvasPage
    const osmdCanvasPageDom = document.querySelector("#osmdCanvasPage1") as HTMLElement
    smoothAnimationState.osmdCanvasPageDom = osmdCanvasPageDom
+   // selectionBox
+   setTimeout(() => {
+      const selectionBoxDom = document.querySelector("#selectionBox") as HTMLElement
+      smoothAnimationState.selectionBoxDom = selectionBoxDom
+   }, 0)
    // box
    const smoothAnimationBoxDom = document.createElement("div")
    smoothAnimationBoxDom.className = "smoothAnimationBox"

src/state.ts

@@ -15,7 +15,7 @@ import { getMusicSheetDetail } from "./utils/baseApi"
 import { getQuery } from "/src/utils/queryString";
 import { followData } from "/src/view/follow-practice/index"
 import { changeSongSourceByBate } from "/src/view/audio-list"
-import { moveSmoothAnimation, smoothAnimationState, moveSmoothAnimationByPlayTime} from "/src/page-instrument/view-detail/smoothAnimation"
+import { moveSmoothAnimation, smoothAnimationState, moveSmoothAnimationByPlayTime, moveTranslateXNum} from "/src/page-instrument/view-detail/smoothAnimation"
 import { storeData } from "/src/store";
 import { downloadXmlStr } from "./view/music-score"
 
@@ -1568,6 +1568,24 @@ export const moveSvgDom = (skipNote?: boolean) => {
   }
 }
 
+
+// 暂停的时候  恢复一行谱偏移位置信息
+watch(
+  () => state.playState,
+  () => {
+    if(state.isSingleLine){
+      // 当在播放中暂停 执行这个方法
+      if(!state.playEnd && state.playState === "paused") {
+        moveTranslateXNum(0)
+        const scrollLeft = smoothAnimationState.osdmScrollDom!.scrollLeft
+        smoothAnimationState.osdmScrollDom!.scrollLeft = scrollLeft + smoothAnimationState.translateXNum
+        smoothAnimationState.translateXNum = 0
+      }
+    }
+  }
+)
+
+
 /* 根据当前的小节获取前面有多少需要去除的合并小节 */
 function getNeedReduceMultipleRestNum(currMeasureIndex:number){
   let needReduceMultipleRestNum = 0;