Merge branch 'feature-tianyong-newVersion' into ktyq-test-new

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

@@ -181,8 +181,19 @@ export default defineComponent({
       } catch (err) {
         console.error(err);
         state.isLoading = false;
-        isEmptyMusicShow.value = true;
-        return;
+        isEmptyMusicShow.value = true
+        // 需要向外面（iframe）派发计时器数据的时候触发
+        if(query.isbeatTimes){
+          console.log("webApi_beatTimes",err)
+          window.parent.postMessage(
+            {
+              api: "webApi_beatTimes",
+              data: "节拍器时值错误！！"
+            },
+            "*"
+          );
+        }
+        return
       }
       detailData.isLoading = false;
       // 如果后台设置了不显示指法，关闭指法开关   如果默认进来是演奏模式 不显示指法开关
@@ -278,7 +289,7 @@ export default defineComponent({
           },
           "*"
         );
-        throw new Error("webApi_beatTimes 完成");
+        return
       }
       // 刷新时值
       handlerModeChange("play", "music");
@@ -313,17 +324,17 @@ export default defineComponent({
       try{
         handleRendered(osmd)
       }catch(err:any){
-        if(err.message === "webApi_beatTimes 完成"){
-          return
+        // 需要向外面（iframe）派发计时器数据的时候触发
+        if(query.isbeatTimes){
+          console.log("webApi_beatTimes",err)
+          window.parent.postMessage(
+            {
+              api: "webApi_beatTimes",
+              data: "节拍器时值错误！！"
+            },
+            "*"
+          );
         }
-        console.log("webApi_beatTimes",err)
-        window.parent.postMessage(
-          {
-            api: "webApi_beatTimes",
-            data: "节拍器时值错误！！"
-          },
-          "*"
-        );
       }
     }
     /** 指法配置 */

src/state.ts

@@ -1496,9 +1496,17 @@ function initMusicSource(data: any, tracks: string[], partIndex: number) {
   }
 }
 const setState = (data: any, index: number) => {
-  // 根据当前文件有没有 设置当前的播放模式
-  if(!state.music){
-    if(state.accompany){
+  // 获取当前模式 声部切换用
+  const localStoragePlayType = localStorage.getItem("musicScorePlayType")
+  if(localStoragePlayType) {
+    localStorage.removeItem("musicScorePlayType")
+    state.playType = localStoragePlayType as any
+  }
+    // 根据当前文件有没有 设置当前的播放模式
+  if(state.playType === "play"){
+    if(state.music){
+      state.playSource = "music"
+    }else if(state.accompany){
       state.playSource = "background"
     }else{
       if(state.fanSong){
@@ -1512,7 +1520,24 @@ const setState = (data: any, index: number) => {
         state.playSource = "mingSong"
       }
     }
+  }else{
+    if(state.fanSong){
+      state.playSource = "music"
+    }else if(state.banSong){
+      state.playSource = "background"
+    }else if(state.mingSong){
+      state.playSource = "mingSong"
+    }else{
+      if(state.music){
+        state.playType = "play"
+        state.playSource = "music"
+      }else if(state.accompany){
+        state.playType = "play"
+        state.playSource = "background"
+      }
+    }
   }
+
   state.appName = "COLEXIU";
   state.detailId = data.bizId;
   state.xmlUrl = data.xmlFileUrl;
@@ -1894,13 +1919,17 @@ watch(
     // console.log('选中的小节',matchMeasureNum,'需要减去的小节',needReduceMultipleRestNum,'当前的小节',state.activeMeasureIndex)
     state.vfmeasures.forEach((item: any, idx: number) => {
       const dataNum = item.getAttribute('data-num')  // 值可能为字符串类型的undefined
-      const measureNum = (dataNum && dataNum !== "undefined") ? Number(dataNum) : -1;
+      let measureNum = (dataNum && dataNum !== "undefined") ? Number(dataNum) : -1;
       let nextDataNum = state.vfmeasures[idx+1]?.getAttribute('data-num')
       // 当有换行小节，下个小节的nextDataNum是undefined，所以这里需要往后找一个
       if(!(nextDataNum && nextDataNum !== "undefined")){
         nextDataNum = state.vfmeasures[idx + 2]?.getAttribute('data-num')
       }
       const nextMeasureNum = Number(nextDataNum)
+      // 当measureNum 为undefined 则是下一个小节的换行小节，所以这里等于下一个小节
+      if(measureNum === -1) {
+        measureNum = nextMeasureNum
+      }
       if (measureNum >= 0 && (measureNum === state.activeMeasureIndex || (measureNum < state.activeMeasureIndex && nextMeasureNum > state.activeMeasureIndex))) {
         item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#132D4C")
         item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#040D1E")
@@ -1952,7 +1981,17 @@ watch(
       }
       state.vfmeasures.forEach((item: any, idx: number) => {
         const dataNum = item.getAttribute('data-num')  // 值可能为字符串类型的undefined
-        const measureNum = (dataNum && dataNum !== "undefined") ? Number(dataNum) : -1;
+        let measureNum = (dataNum && dataNum !== "undefined") ? Number(dataNum) : -1;
+        let nextDataNum = state.vfmeasures[idx+1]?.getAttribute('data-num')
+        // 当有换行小节，下个小节的nextDataNum是undefined，所以这里需要往后找一个
+        if(!(nextDataNum && nextDataNum !== "undefined")){
+          nextDataNum = state.vfmeasures[idx + 2]?.getAttribute('data-num')
+        }
+        const nextMeasureNum = Number(nextDataNum)
+        // 当measureNum 为undefined 则是下一个小节的换行小节，所以这里等于下一个小节
+        if(measureNum === -1) {
+          measureNum = nextMeasureNum
+        }
         // 小于选中置灰
         if (measureNum < leftMeasureNumberXML) {
           item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(96,159,207,0.5)")
@@ -1973,13 +2012,17 @@ watch(
       // 恢复选段前
       state.vfmeasures.forEach((item: any, idx: number) => {
         const dataNum = item.getAttribute('data-num')  // 值可能为字符串类型的undefined
-        const measureNum = (dataNum && dataNum !== "undefined") ? Number(dataNum) : -1;
+        let measureNum = (dataNum && dataNum !== "undefined") ? Number(dataNum) : -1;
         let nextDataNum = state.vfmeasures[idx+1]?.getAttribute('data-num')
         // 当有换行小节，下个小节的nextDataNum是undefined，所以这里需要往后找一个
         if(!(nextDataNum && nextDataNum !== "undefined")){
           nextDataNum = state.vfmeasures[idx + 2]?.getAttribute('data-num')
         }
         const nextMeasureNum = Number(nextDataNum)
+        // 当measureNum 为undefined 则是下一个小节的换行小节，所以这里等于下一个小节
+        if(measureNum === -1) {
+          measureNum = nextMeasureNum
+        }
         if (measureNum >= 0 && (measureNum === state.activeMeasureIndex || (measureNum < state.activeMeasureIndex && nextMeasureNum > state.activeMeasureIndex)) ) {
           item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#132D4C")
           item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#040D1E")

src/view/audio-list/index.tsx

@@ -151,14 +151,8 @@ export const toggleMutePlayAudio = (source: IPlayState, muted: boolean) => {
 
 /** 切换节拍器音源 */
 export const changeSongSourceByBate = (isDisBate:boolean) => {
+	const currentTime = getAudioCurrentTime()
 	// isDisBate 为true 切换到不带节拍的，为false 切换到带节拍的
-	let currentTime
-	if(state.playSource === "mingSong"){
-		currentTime = audioData.mingSongEle?.currentTime
-	}else{
-		currentTime = audioData.songEle?.currentTime || audioData.backgroundEle?.currentTime
-	}
-	currentTime || (currentTime = audioData.progress || 0)
 	if (isDisBate) {
 		if(state.playType === "play"){
 			audioData.songEle = audioData.songCollection.songEle
@@ -179,12 +173,8 @@ export const changeSongSourceByBate = (isDisBate:boolean) => {
 			audioData.mingSongEle = audioData.songCollection.betaMingSongEle || audioData.songCollection.mingSongEle
 		}
 	}
-	audioData.songEle && (audioData.songEle.currentTime = currentTime)
-	audioData.backgroundEle && (audioData.backgroundEle.currentTime = currentTime)
-	// 当前是唱名才设置时间
-	if(state.playSource === "mingSong") {
-		audioData.mingSongEle && (audioData.mingSongEle.currentTime = currentTime)
-	}
+	// 设置进度
+	setAudioCurrentTime(currentTime)
 	// 设置静音与取消静音
 	if (state.playSource === "music") {
 		audioData.songEle && (audioData.songEle.muted = false);

src/view/music-score/HorizontalDragScroll.ts

@@ -0,0 +1,71 @@
+import state from "/src/state"
+interface HorizontalDragScrollOptions {
+   speed?: number // 滚动速度
+   cursorGrab?: string // 抓取前的鼠标样式
+}
+
+class HorizontalDragScroll {
+    private container: HTMLElement
+    private options: HorizontalDragScrollOptions
+    private isDown: boolean
+    private startX: number
+    private scrollLeft: number
+
+    constructor(container: HTMLElement, options: HorizontalDragScrollOptions = {}) {
+        this.container = container
+        this.options = {
+            speed: options.speed || 2,
+            cursorGrab: options.cursorGrab || "grab",
+        }
+
+        this.isDown = false
+        this.startX = 0
+        this.scrollLeft = 0
+
+        this.init()
+    }
+
+    private init() {
+        this.container.style.cursor = this.options.cursorGrab || "grab"
+
+        this.container.addEventListener("mousedown", this.onMouseDown.bind(this))
+        this.container.addEventListener("mouseleave", this.onMouseLeave.bind(this))
+        this.container.addEventListener("mouseup", this.onMouseUp.bind(this))
+        this.container.addEventListener("mousemove", this.onMouseMove.bind(this))
+    }
+
+    private onMouseDown(e: MouseEvent) {
+        // 当播放中或者不是一行谱模式  不起作用
+        if(state.playState === "play" || !state.isSingleLine) {
+            return
+        }
+        this.isDown = true
+        this.startX = e.pageX - this.container.offsetLeft
+        this.scrollLeft = this.container.scrollLeft
+    }
+
+    private onMouseLeave() {
+        this.isDown = false
+    }
+
+    private onMouseUp() {
+        this.isDown = false
+    }
+
+    private onMouseMove(e: MouseEvent) {
+        if (!this.isDown) return
+        e.preventDefault()
+        const x = e.pageX - this.container.offsetLeft
+        const walk = (x - this.startX) * (this.options.speed || 2)
+        this.container.scrollLeft = this.scrollLeft - walk
+    }
+
+    public destroy() {
+        this.container.removeEventListener("mousedown", this.onMouseDown.bind(this))
+        this.container.removeEventListener("mouseleave", this.onMouseLeave.bind(this))
+        this.container.removeEventListener("mouseup", this.onMouseUp.bind(this))
+        this.container.removeEventListener("mousemove", this.onMouseMove.bind(this))
+    }
+    }
+
+export default HorizontalDragScroll

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

@@ -83,6 +83,9 @@
 .notTouch{
     touch-action: none;
 }
+.pcCursorGrab{
+    cursor: initial !important;
+}
 .inGradualRange{
    :global{
         #cursorImg-0{

src/view/music-score/index.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, onMounted, reactive, ref } from "vue";
+import { computed, defineComponent, onMounted, reactive, ref, onUnmounted } from "vue";
 import { formatXML, onlyVisible } from "../../helpers/formateMusic";
 // // @ts-ignore
 import { OpenSheetMusicDisplay } from "/osmd-extended/src";
@@ -12,6 +12,7 @@ import { setGlobalData } from "/src/utils";
 import Loading from "/src/view/audio-list/loading"
 import { storeData } from "/src/store";
 import { isLoadingCss } from "/src/page-instrument/view-detail/loadingCss"
+import HorizontalDragScroll from './HorizontalDragScroll';
 
 export const musicRenderTypeKey = "musicRenderType";
 let osmd: any = null;
@@ -174,14 +175,22 @@ export default defineComponent({
 			musicData.containerWidth = document.getElementById("musicAndSelection")?.offsetWidth || 625;
 			// console.log(musicData.containerWidth)
 		};
+		let horizontalDragScroll:HorizontalDragScroll | null
 		onMounted(async () => {
 			getContainerWidth();
 			//setRenderType();
 			await getXML();
 			await init();
 			musicData.isRenderLoading = false;
+			// pc 端支持 拖动滚动
+			if(state.platform === "PC"){
+				const container = document.querySelector('#musicAndSelection') as HTMLElement;
+				horizontalDragScroll = new HorizontalDragScroll(container);
+			}
 		});
-
+		onUnmounted(() => {
+			horizontalDragScroll?.destroy()
+		})
 		const isInTheGradualRange = computed(() => {
 			let result: boolean = false;
 			const activeMeasureIndex = state.times[state.activeNoteIndex]?.measureListIndex || -1;
@@ -236,7 +245,9 @@ export default defineComponent({
 					state.musicRenderType == EnumMusicRenderType.staff ? "staff" : "jianpuTone",
 					state.isSingleLine && "singleLineMusicBox",
 					(!state.isCreateImg && !state.isPreView && state.musicRenderType === EnumMusicRenderType.staff) ? "blueMusicXml" : "",
-					state.isSingleLine && state.playState ==="play" && styles.notTouch
+					state.isSingleLine && state.playState ==="play" && styles.notTouch,
+					!state.isSingleLine && state.platform === "PC" &&  styles.pcCursorGrab
+
 				]}
 			>
 				{slots.default?.()}

src/view/plugins/toggleMusicSheet/index.tsx

@@ -69,6 +69,8 @@ export default defineComponent({
           type: 'fullscreen',
         },
       })
+      // 存储当前 模式
+      localStorage.setItem("musicScorePlayType", state.playType)
       const _url =
         location.origin +
         location.pathname +