feat: 添加一行谱模式

src/page-instrument/header-top/index.tsx

@@ -358,25 +358,30 @@ export default defineComponent({
               <span>模式</span>
             </div>
 
-            <div class={[styles.btn]} onClick={() => {
-              // 切换光标模式
-              let mode = metronomeData.cursorMode
-              if (['follow'].includes(state.modeType)) {
-                mode = metronomeData.cursorMode === 1 ? 3 : 1
-              } else {
-                mode = metronomeData.cursorMode === 3 ? 1 : metronomeData.cursorMode + 1
-              }              
-              metronomeData.cursorMode = mode
-            }}>
-              <img class={styles.iconBtn} src={headImg(metronomeData.cursorMode === 1 ? 'cursor-icon-1.svg' : metronomeData.cursorMode === 2 ? 'cursor-icon-2.svg' : metronomeData.cursorMode === 3 ? 'cursor-icon-3.svg' : '')} />
-              <span class={styles.iconContent}>
-                {metronomeData.cursorMode === 1 ? '音符指针' : metronomeData.cursorMode === 2 ? '节拍指针' : metronomeData.cursorMode === 3 ? '关闭指针' : ''}
-                {metronomeData.cursorTips && <>
-                    <i class={styles.arrowIcon}></i>
-                    <div class={[styles['botton-tips'],metronomeData.cursorMode === 3 ? styles.tipSpec : '']}>{metronomeData.cursorTips}</div>
-                </>}
-              </span>
-            </div>
+            {/* 一行谱模式，暂不支持节拍指针 */}
+            {
+              !state.isSingleLine ? 
+              <div class={[styles.btn]} onClick={() => {
+                // 切换光标模式
+                let mode = metronomeData.cursorMode
+                if (['follow'].includes(state.modeType)) {
+                  mode = metronomeData.cursorMode === 1 ? 3 : 1
+                } else {
+                  mode = metronomeData.cursorMode === 3 ? 1 : metronomeData.cursorMode + 1
+                }              
+                metronomeData.cursorMode = mode
+              }}>
+                <img class={styles.iconBtn} src={headImg(metronomeData.cursorMode === 1 ? 'cursor-icon-1.svg' : metronomeData.cursorMode === 2 ? 'cursor-icon-2.svg' : metronomeData.cursorMode === 3 ? 'cursor-icon-3.svg' : '')} />
+                <span class={styles.iconContent}>
+                  {metronomeData.cursorMode === 1 ? '音符指针' : metronomeData.cursorMode === 2 ? '节拍指针' : metronomeData.cursorMode === 3 ? '关闭指针' : ''}
+                  {metronomeData.cursorTips && <>
+                      <i class={styles.arrowIcon}></i>
+                      <div class={[styles['botton-tips'],metronomeData.cursorMode === 3 ? styles.tipSpec : '']}>{metronomeData.cursorTips}</div>
+                  </>}
+                </span>
+              </div> : null         
+            }  
+
             {state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert && (
               <div class={[styles.btn, (state.playState === "play" && fingeringBtn.value.disabled) && styles.disabled]} 
                 onClick={() => {

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

@@ -43,7 +43,7 @@
 }
 
 :global {
-    #cursorImg-0 {
+    #cursorImg-0, #cursor-copy {
         width: 2PX !important;
         min-height: 58PX;
         height: 58PX;
@@ -57,21 +57,24 @@
     }
 
     .staff {
-        #cursorImg-0 {
+        #cursorImg-0, #cursor-copy {
             width: 14Px;
             transform: translateX(11Px);
         }
+        #cursor-copy {
+            transform: translate(11Px,-23%);
+        }
     }
 
     .jianpuTone {
-        #cursorImg-0 {
+        #cursorImg-0, #cursor-copy {
             width: 18Px;
             transform: translateX(6.3Px) !important;
         }
     }
 
     .eyeProtection {
-        #cursorImg-0 {
+        #cursorImg-0, #cursor-copy {
             background-color: rgb(255, 159, 88);
         }
     }
@@ -83,7 +86,7 @@
 
 .xiaomi {
     :global {
-        #cursorImg-0 {
+        #cursorImg-0, #cursor-copy {
             height: 58PX !important;
             min-height: auto !important;
         }
@@ -92,21 +95,21 @@
 
 .PC {
     :global {
-        #cursorImg-0 {
+        #cursorImg-0, #cursor-copy {
             margin-top: -18PX;
             min-height: 94Px;
             border-radius: 10Px;
         }
 
         .staff {
-            #cursorImg-0 {
+            #cursorImg-0, #cursor-copy {
                 width: 35Px;
                 transform: translateX(21Px) !important;
             }
         }
 
         .jianpuTone {
-            #cursorImg-0 {
+            #cursorImg-0, #cursor-copy {
                 width: 29Px;
                 transform: translateX(13Px) !important;
             }
@@ -149,7 +152,7 @@
         #osmdCanvasPage1 {
             padding-bottom: 0 !important;
         }
-        #cursorImg-0 {
+        #cursorImg-0, #cursor-copy {
             opacity: 0 !important;
         }
     }
@@ -161,4 +164,13 @@
     visibility: hidden;
     background: transparent;
     opacity: 0;
+}
+
+.singleLineDetail {
+    :global {
+        #cursorImg-0 {
+            display: none;
+        }
+    }
+
 }

src/page-instrument/view-detail/index.tsx

@@ -135,6 +135,7 @@ export default defineComponent({
       if (state.isPreView) {
         state.zoom = 0.65
       }
+      state.isSingleLine = query.isSingleLine
       // Promise.all([sysMusicScoreAccompanimentQueryPage(id)]).then((values) => {
       //   getMusicInfo(values[0]);
       // });
@@ -331,7 +332,7 @@ export default defineComponent({
     };
     return () => (
       <div
-        class={[styles.detail, state.setting.eyeProtection && "eyeProtection", state.platform === IPlatform.PC && styles.PC, state.isPreView && styles.preViewDetail]}
+        class={[styles.detail, state.setting.eyeProtection && "eyeProtection", state.platform === IPlatform.PC && styles.PC, state.isPreView && styles.preViewDetail, state.isSingleLine && styles.singleLineDetail]}
         style={{
           paddingLeft: detailData.paddingLeft,
           background: state.setting.camera ? `rgba(${state.setting.eyeProtection ? "253,244,229" : "255,255,255"} ,${state.setting.cameraOpacity / 100}) !important` : "",

src/state.ts

@@ -446,6 +446,11 @@ const state = reactive({
   osmdSvgDom: null as any,
   /** 滚动容器dom */
   osdmScrollDom: null as any,
+  /** 光标dom */
+  cursorDom: null as any,
+  fistNoteLeft: 0,
+  /** 是否为单行谱渲染模式 */
+  isSingleLine: false,
 });
 const browserInfo = browser();
 let offset_duration = 0;
@@ -694,7 +699,6 @@ 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) => {
@@ -757,12 +761,10 @@ 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);
@@ -772,7 +774,10 @@ export const gotoNext = (note: any) => {
   } catch (error) {
     console.log(error);
   }
-
+  // 一行谱，需要滚动小节
+  if (state.isSingleLine) {
+    moveSvgDom(50);
+  }
   scrollViewNote();
 };
 /** 获取指定音符 */
@@ -1217,8 +1222,12 @@ let moveX = 0;
 export const moveSvgDom = (offset: number) => {
   moveX += offset;
   // state.osmdSvgDom.style.transform = `translateX(${moveX}px)`;
+  const cursorLeft = state.cursorDom?.getBoundingClientRect()?.left || 0;
+  const leftValue = parseFloat(state.cursorDom.style.left) - 47 - 20
+  // console.log(cursorLeft,leftValue,'光标位置')
+  
   state.osdmScrollDom.scrollTo({
-    left: moveX,
+    left: leftValue,
     behavior: "smooth",
   });
 }

src/view/music-score/index.module.less

@@ -22,10 +22,10 @@
             position: absolute !important;
             left: 0;
             top: 0;
-            // >svg {
-            //     background: antiquewhite;
-            //     transition: all 0.5s;
-            // }
+            >svg {
+                // background: antiquewhite;
+                transition: all 0.5s;
+            }
         }
     }
 }

src/view/music-score/index.tsx

@@ -89,6 +89,25 @@ export default defineComponent({
 				state.gradual = getGradualLengthByXml(xml);
 			}
 		};
+		// 一行谱模式，创建固定的光标
+		const createFixedCursor = () => {
+			if (!state.isSingleLine) return;
+			// const svg: any = document.getElementById("osmdSvgPage1");
+			// state.osmdSvgDom = svg;
+			const scrollDom = document.getElementById("musicAndSelection");
+			const cursorDom = document.getElementById("cursorImg-0");
+			state.fistNoteLeft = cursorDom?.getBoundingClientRect()?.left || 0;
+			state.osdmScrollDom = scrollDom;
+			state.cursorDom = cursorDom;
+			let copyCursor: any = cursorDom?.cloneNode(true);
+			if (copyCursor) {
+				copyCursor.setAttribute('id','cursor-copy');
+				copyCursor.style.position = 'sticky';
+				copyCursor.style.zIndex = '2';
+				copyCursor.style.background = 'red';
+				copyCursor && scrollDom?.appendChild(copyCursor);
+			}
+		}
 		const init = async () => {
 			const container = document.getElementById("musicAndSelection");
 			if (!container || !musicData.score) return;
@@ -102,7 +121,7 @@ export default defineComponent({
 				drawPartNames: props.showPartNames, // 是否渲染声轨名称
 				drawComposer: false, // 渲染作者
 				defaultColorMusic: props.musicColor, // 颜色
-				// renderSingleHorizontalStaffline: true,
+				renderSingleHorizontalStaffline: state.isSingleLine ? true : false,
 				// pageFormat: 'A4_P',
 				// autoBeam: true,
 				// drawMetronomeMarks: false,
@@ -111,7 +130,7 @@ export default defineComponent({
 				
 			});
 			// osmd.EngravingRules.CompactMode = true // 紧凑模式
-			osmd.EngravingRules.PageRightMargin = 2;
+			osmd.EngravingRules.PageRightMargin = state.isSingleLine ? (window.innerWidth+100)/10 : 2;
 			osmd.EngravingRules.PageTopMargin = 10;
 			osmd.EngravingRules.PageTopMarginNarrow = 3;
 			osmd.EngravingRules.PageLeftMargin = 2;
@@ -128,11 +147,8 @@ export default defineComponent({
 			await osmd.load(musicData.score);
 			osmd.zoom = state.zoom;
 			osmd.render();
-			// const svg: any = document.getElementById("osmdSvgPage1");
-			// state.osmdSvgDom = svg;
-			const scrollDom = document.getElementById("musicAndSelection");
-			state.osdmScrollDom = scrollDom;
-			// console.log("🚀 ~ osmd:", osmd, svg)
+			createFixedCursor();
+			// console.log("🚀 ~ osmd:", osmd)
 			emit("rendered", osmd);
 			resetFormate();
 			resetGivenFormate();