fix: #8897 bug修复

src/pages/detail/helpers.ts

@@ -1,7 +1,7 @@
 import state from './state'
 import appState from '/src/state'
 import { browser } from '/src/helpers/utils'
-import runtime, { getFixTime } from './runtime'
+import runtime, { getFixTime, getFirsrNoteByMeasureListIndex, getBoundingBoxByNote } from './runtime'
 // @ts-ignore
 import {
   isSpecialMark,
@@ -1517,3 +1517,67 @@ const getImageSize = (src: string): Promise<HTMLImageElement> => {
     img.onerror = (err) => reject(err)
   })
 }
+
+
+// 计算选择范围内的小节宽度高度
+export const setSettionBackground = () => {
+  state.sectionBoundingBoxs = []
+  const [start, end] = state.section.sort((a, b) => a.i - b.i)
+  let startIndex = 0,
+    endIndex = 0
+  const selectNoteNum = Math.abs(end.i - start.i) + 1
+  startIndex = 0
+  endIndex = end.noteLength
+  const seteds: number[] = []
+  const heights: number[] = []
+  for (let index = 0; index < selectNoteNum; index++) {
+    const activeIndex = index + start.i
+    const activeTimeNote = state.times[activeIndex]
+    const activeNote = activeTimeNote.noteElement
+    const measureListIndex = activeNote.sourceMeasure.measureListIndex
+
+    // 如果没有节拍器,默认提前一个小节
+    if (index === 0 && measureListIndex !== 0 && !state.needTick) {
+      const firstNote = getFirsrNoteByMeasureListIndex(measureListIndex - 1)
+      const fnote = firstNote?.noteElement
+      if (fnote) {
+        // console.log(fnote.sourceMeasure?.measureListIndex, start.noteElement?.sourceMeasure?.measureListIndex)
+        for (
+          let j = fnote.sourceMeasure?.measureListIndex;
+          j < start.noteElement?.sourceMeasure?.measureListIndex;
+          j++
+        ) {
+          if (!seteds.includes(j)) {
+            for (const item of state.times) {
+              if (item.noteElement?.sourceMeasure?.measureListIndex === j && !seteds.includes(j)) {
+                const boundingBox = getBoundingBoxByNote(item.noteElement, {
+                  before: true,
+                })
+                state.befireSection = item
+                if (!boundingBox) {
+                  continue
+                }
+                state.sectionBoundingBoxs.push(boundingBox)
+                heights.push(boundingBox.height)
+                seteds.push(j)
+              }
+            }
+          }
+        }
+      }
+    }
+
+    if (!seteds.includes(measureListIndex)) {
+      seteds.push(measureListIndex)
+      const boundingBox = getBoundingBoxByNote(activeNote)
+      if (boundingBox) {
+        state.sectionBoundingBoxs.push(boundingBox)
+        heights.push(boundingBox.height)
+      }
+    }
+  }
+  state.sectionBoundingBoxs.map((item) => {
+    item.height = Math.max(...heights)
+    return item
+  })
+}

src/pages/detail/runtime.ts

@@ -1048,3 +1048,24 @@ export const setCaptureMode = async () => {
     })
   }
 }
+
+
+export const getBoundingBoxByNote = (note: any, extra?: any) => {
+  const mBoundingBox = note.sourceMeasure?.verticalMeasureList?.[0]?.boundingBox
+  if (!mBoundingBox) {
+    return null
+  }
+  const boundingBox = {
+    ...mBoundingBox.absolutePosition,
+    ...mBoundingBox.size,
+    ...extra,
+  }
+  boundingBox.x = boundingBox.x * 10
+  boundingBox.y = boundingBox.y * 10
+  boundingBox.width = boundingBox.width * 10
+  boundingBox.height = boundingBox.height * 10
+  if (note?.sourceMeasure?.verticalMeasureList?.[0]?.stave?.height) {
+    boundingBox.height = note.sourceMeasure?.verticalMeasureList?.[0]?.stave?.height
+  }
+  return boundingBox
+}

src/pages/detail/section-box/index.tsx

@@ -3,8 +3,8 @@ import { defineComponent, watchEffect, TransitionGroup, ref, Ref, reactive } fro
 import event from '/src/components/music-score/event'
 import SettingState from '/src/pages/detail/setting-state'
 import state from '../state'
-import runtime, { getFirsrNoteByMeasureListIndex } from '../runtime'
-import { getActtiveNoteByTimes, getBoundingBoxByverticalNote, getNoteBySlursStart } from '../helpers'
+import runtime, { getFirsrNoteByMeasureListIndex, getBoundingBoxByNote } from '../runtime'
+import { getActtiveNoteByTimes, getBoundingBoxByverticalNote, getNoteBySlursStart, setSettionBackground } from '../helpers'
 import { formatZoom } from '/src/helpers/utils'
 import styles from './index.module.less'
 import classNames from 'classnames'
@@ -88,87 +88,6 @@ export default defineComponent({
     }
   },
   methods: {
-    getBoundingBoxByNote(note: any, extra?: any) {
-      const mBoundingBox = note.sourceMeasure?.verticalMeasureList?.[0]?.boundingBox
-      if (!mBoundingBox) {
-        return null
-      }
-      const boundingBox = {
-        ...mBoundingBox.absolutePosition,
-        ...mBoundingBox.size,
-        ...extra,
-      }
-      boundingBox.x = boundingBox.x * 10
-      boundingBox.y = boundingBox.y * 10
-      boundingBox.width = boundingBox.width * 10
-      boundingBox.height = boundingBox.height * 10
-      if (note?.sourceMeasure?.verticalMeasureList?.[0]?.stave?.height) {
-        boundingBox.height = note.sourceMeasure?.verticalMeasureList?.[0]?.stave?.height
-      }
-      return boundingBox
-    },
-    // 计算选择范围内的小节宽度高度
-    setSettionBackground() {
-      state.sectionBoundingBoxs = []
-      const [start, end] = state.section.sort((a, b) => a.i - b.i)
-      let startIndex = 0,
-        endIndex = 0
-      const selectNoteNum = Math.abs(end.i - start.i) + 1
-      startIndex = 0
-      endIndex = end.noteLength
-      const seteds: number[] = []
-      const heights: number[] = []
-      for (let index = 0; index < selectNoteNum; index++) {
-        const activeIndex = index + start.i
-        const activeTimeNote = state.times[activeIndex]
-        const activeNote = activeTimeNote.noteElement
-        const measureListIndex = activeNote.sourceMeasure.measureListIndex
-
-        // 如果没有节拍器,默认提前一个小节
-        if (index === 0 && measureListIndex !== 0 && !state.needTick) {
-          const firstNote = getFirsrNoteByMeasureListIndex(measureListIndex - 1)
-          const fnote = firstNote?.noteElement
-          if (fnote) {
-            // console.log(fnote.sourceMeasure?.measureListIndex, start.noteElement?.sourceMeasure?.measureListIndex)
-            for (
-              let j = fnote.sourceMeasure?.measureListIndex;
-              j < start.noteElement?.sourceMeasure?.measureListIndex;
-              j++
-            ) {
-              if (!seteds.includes(j)) {
-                for (const item of state.times) {
-                  if (item.noteElement?.sourceMeasure?.measureListIndex === j && !seteds.includes(j)) {
-                    const boundingBox = this.getBoundingBoxByNote(item.noteElement, {
-                      before: true,
-                    })
-                    state.befireSection = item
-                    if (!boundingBox) {
-                      continue
-                    }
-                    state.sectionBoundingBoxs.push(boundingBox)
-                    heights.push(boundingBox.height)
-                    seteds.push(j)
-                  }
-                }
-              }
-            }
-          }
-        }
-
-        if (!seteds.includes(measureListIndex)) {
-          seteds.push(measureListIndex)
-          const boundingBox = this.getBoundingBoxByNote(activeNote)
-          if (boundingBox) {
-            state.sectionBoundingBoxs.push(boundingBox)
-            heights.push(boundingBox.height)
-          }
-        }
-      }
-      state.sectionBoundingBoxs.map((item) => {
-        item.height = Math.max(...heights)
-        return item
-      })
-    },
     setSection(evt: MouseEvent) {
       const activeNote = getActtiveNoteByTimes(evt)
       if (activeNote && state.section.length < 2) {
@@ -184,7 +103,7 @@ export default defineComponent({
       }
       if (state.section.length === 2) {
         Toast.clear()
-        this.setSettionBackground()
+        setSettionBackground()
       }
     },
     sectionClick(evt: MouseEvent): void {
@@ -278,7 +197,7 @@ export default defineComponent({
           const activeNumberIndex = (item?.noteElement?.sourceMeasure?.measureNumber + 1) || -2;
           // console.log(activeNumberIndex,'👀👀',metronomeData.activeMetro?.measureNumberXML)
           if (item.si === 0) {
-            boundingBox = this.getBoundingBoxByNote(item.noteElement)
+            boundingBox = getBoundingBoxByNote(item.noteElement)
           }
           return (
             <>

src/subpages/colexiu/index.tsx

@@ -402,7 +402,7 @@ export default defineComponent({
                     onRenderError={onRenderError}
                     onRerender={onRerender}
                   />
-                  {needFingering && <Fingering code={detail.value.code} />}
+                  {needFingering && detailState.initRendered && <Fingering code={detail.value.code} />}
                 </>
               )}
               {modelType.value === 'follow' && <Follow ref={followRef} />}

src/subpages/colexiu/unitTest/index.tsx

@@ -7,6 +7,7 @@ import state from '/src/pages/detail/state'
 import { Toast } from 'vant'
 import { userInfo } from '../App'
 import { browser } from '/src/helpers/utils'
+import { setSettionBackground } from '/src/pages/detail/helpers'
 
 interface IquestionExtendsInfo {
   /** 评测难度 */
@@ -100,6 +101,7 @@ export default defineComponent({
         if (questionExtendsInfo.value.speed) {
           changeSpeed(questionExtendsInfo.value.speed)
         }
+        setSettionBackground()
       }
     }
     onMounted(() => {