|
@@ -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?.()}
|