feat: 一行谱音符闪动

src/page-instrument/view-detail/index.module.less

@@ -178,7 +178,7 @@
             animation: cnimate 1s ease-in-out infinite;
         }
         .leftNoteBg {
-            position: relative;
+            position: sticky;
             background: rgba(0, 0, 0, 0.3);
             ::before {
                 content: "";
@@ -193,7 +193,7 @@
             }
         }
         #cursor-copy {
-            ::after {
+            &::after {
                 content: "";
                 position: sticky;
                 left: 0;

src/state.ts

@@ -1309,18 +1309,18 @@ export const createFixedCursor = () => {
     leftDom.style.width = state.times[0]?.bbox?.x - firstMeasureBBox?.x * state.zoom + 'px';
     leftDom.style.height = firstMeasureBBox?.height * state.zoom + 'px';
     leftDom.style.left = firstMeasureBBox?.x * state.zoom + 'px';
-    leftDom.style.top = '20px';
+    leftDom.style.transform = 'translateY(20px)';
     leftDom.classList.add('leftNoteBg');
-    scrollDom?.appendChild(leftDom);
+    // scrollDom?.appendChild(leftDom);
   }
 }
 
 /** 计算首尾音符的间距 */
 export const calculateDistance = () => {
-  const firstNoteRect = document.getElementById(`vf-${state.times[0]?.svgElement?.attrs?.id}`)?.getBoundingClientRect();
-  const lastNoteRect = document.getElementById(`vf-${state.times.last()?.svgElement?.attrs?.id}`)?.getBoundingClientRect();
-  if (firstNoteRect && lastNoteRect) {
-    const noteDistance = lastNoteRect.x - firstNoteRect.x + lastNoteRect.width / 3;
+  const firstNoteBBox = state.times[0]?.bbox;
+  const lastNoteBBox = state.times.last()?.bbox;
+  if (firstNoteBBox && lastNoteBBox) {
+    const noteDistance = lastNoteBBox.x - firstNoteBBox.x + lastNoteBBox.width / 2 - firstNoteBBox.width / 2 - 1;
     console.log('首尾间距', noteDistance)
     state.noteDistance = noteDistance || 0;
   }

src/view/music-score/index.tsx

@@ -113,6 +113,7 @@ export default defineComponent({
 			});
 			// osmd.EngravingRules.CompactMode = true // 紧凑模式
 			osmd.EngravingRules.PageRightMargin = state.isSingleLine ? (window.innerWidth+200)/10 : 2;
+			osmd.EngravingRules.FixedMeasureWidth = true;
 			osmd.EngravingRules.PageTopMargin = 10;
 			osmd.EngravingRules.PageTopMarginNarrow = 3;
 			osmd.EngravingRules.PageLeftMargin = 2;