|
|
@@ -13,201 +13,210 @@ import IntonationUp from "./imgs/pitchHigh.png"
|
|
|
import MultipleRestMeasures from "./multipleRestMeasures"
|
|
|
import { browser } from "../../utils";
|
|
|
|
|
|
-export default defineComponent({
|
|
|
- name: "selection",
|
|
|
- setup() {
|
|
|
- const browsInfo = browser();
|
|
|
- const isPad = navigator?.userAgent?.includes("UAWEIVRD-W09") || browsInfo?.iPad || browsInfo.isTablet;
|
|
|
- const route = useRoute();
|
|
|
- const query: any = {
|
|
|
- ...getQuery(),
|
|
|
- ...route.query,
|
|
|
+const selectData = reactive({
|
|
|
+ notes: [] as any[],
|
|
|
+ staves: [] as any[],
|
|
|
+ measureHeight: 0 as number, // 小节高度
|
|
|
+});
|
|
|
+
|
|
|
+/** 计算点击层数据 */
|
|
|
+const calcNoteData = () => {
|
|
|
+ const musicContainer = document.getElementById("musicAndSelection")?.getBoundingClientRect() || {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ };
|
|
|
+ const parentLeft = musicContainer.x || 0;
|
|
|
+ const parentTop = musicContainer.y || 0;
|
|
|
+ const notes = state.times;
|
|
|
+ const notesList: string[] = [];
|
|
|
+ const MeasureNumberXMLList: number[] = [];
|
|
|
+ let minMeasureHeigt: number = 0;
|
|
|
+ for (let i = 0; i < notes.length; i++) {
|
|
|
+ const item = notes[i];
|
|
|
+ // console.log("🚀 ~ item:", item)
|
|
|
+ const noteItem = {
|
|
|
+ ...item,
|
|
|
+ index: item.i,
|
|
|
+ bbox: null as any,
|
|
|
+ staveBox: null as any,
|
|
|
};
|
|
|
- const selectData = reactive({
|
|
|
- notes: [] as any[],
|
|
|
- staves: [] as any[],
|
|
|
- measureHeight: 0 as number, // 小节高度
|
|
|
- });
|
|
|
- /** 计算点击层数据 */
|
|
|
- const calcNoteData = () => {
|
|
|
- const musicContainer = document.getElementById("musicAndSelection")?.getBoundingClientRect() || {
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- };
|
|
|
- const parentLeft = musicContainer.x || 0;
|
|
|
- const parentTop = musicContainer.y || 0;
|
|
|
- const notes = state.times;
|
|
|
- const notesList: string[] = [];
|
|
|
- const MeasureNumberXMLList: number[] = [];
|
|
|
- let minMeasureHeigt: number = 0;
|
|
|
- for (let i = 0; i < notes.length; i++) {
|
|
|
- const item = notes[i];
|
|
|
- // console.log("🚀 ~ item:", item)
|
|
|
- const noteItem = {
|
|
|
- ...item,
|
|
|
- index: item.i,
|
|
|
- bbox: null as any,
|
|
|
- staveBox: null as any,
|
|
|
+ if (!notesList.includes(item.noteId)) {
|
|
|
+ let staveBbox: any = {}, customBgBox: any = {};
|
|
|
+ if (item.stave?.attrs?.id) {
|
|
|
+ const staveEle = document.querySelector(`#${item.stave.attrs.id}`);
|
|
|
+ staveBbox = staveEle?.parentElement?.parentElement?.getBoundingClientRect?.() || {
|
|
|
+ x: 0,
|
|
|
+ width: 0,
|
|
|
};
|
|
|
- if (!notesList.includes(item.noteId)) {
|
|
|
- let staveBbox: any = {}, customBgBox: any = {};
|
|
|
- if (item.stave?.attrs?.id) {
|
|
|
- const staveEle = document.querySelector(`#${item.stave.attrs.id}`);
|
|
|
- staveBbox = staveEle?.parentElement?.parentElement?.getBoundingClientRect?.() || {
|
|
|
- x: 0,
|
|
|
- width: 0,
|
|
|
+ customBgBox = staveEle?.querySelector('.vf-custom-bg')?.getBoundingClientRect() || { y: 0, height: 0 }
|
|
|
+ // console.log("🚀 ~ staveBbox:", staveBbox.height)
|
|
|
+ }
|
|
|
+ if (item.svgElement) {
|
|
|
+ const noteEle = document.querySelector(`#vf-${item.svgElement?.attrs?.id}`);
|
|
|
+
|
|
|
+ if (noteEle) {
|
|
|
+ const noteBbox = noteEle.getBoundingClientRect?.() || { x: 0, width: 0 };
|
|
|
+ if (state.musicRenderType !== EnumMusicRenderType.staff) {
|
|
|
+ noteItem.bbox = {
|
|
|
+ left: noteBbox.x - parentLeft - noteBbox.width / 4 + "px",
|
|
|
+ top: noteBbox.y - parentTop - noteBbox.height + "px",
|
|
|
+ width: noteBbox.width * 1.5 + "px",
|
|
|
+ height: noteBbox.height * 3 + "px",
|
|
|
+ x: item.bbox?.x,
|
|
|
+ y: item.bbox?.y,
|
|
|
+ originWidth: item.bbox?.width
|
|
|
};
|
|
|
- customBgBox = staveEle?.querySelector('.vf-custom-bg')?.getBoundingClientRect() || { y: 0, height: 0 }
|
|
|
- // console.log("🚀 ~ staveBbox:", staveBbox.height)
|
|
|
- }
|
|
|
- if (item.svgElement) {
|
|
|
- const noteEle = document.querySelector(`#vf-${item.svgElement?.attrs?.id}`);
|
|
|
-
|
|
|
- if (noteEle) {
|
|
|
- const noteBbox = noteEle.getBoundingClientRect?.() || { x: 0, width: 0 };
|
|
|
- if (state.musicRenderType !== EnumMusicRenderType.staff) {
|
|
|
- noteItem.bbox = {
|
|
|
- left: noteBbox.x - parentLeft - noteBbox.width / 4 + "px",
|
|
|
- top: noteBbox.y - parentTop - noteBbox.height + "px",
|
|
|
- width: noteBbox.width * 1.5 + "px",
|
|
|
- height: noteBbox.height * 3 + "px",
|
|
|
- x: item.bbox?.x,
|
|
|
- y: item.bbox?.y,
|
|
|
- originWidth: item.bbox?.width
|
|
|
- };
|
|
|
- const noteHead = noteEle.querySelector(".vf-numbered-note-head");
|
|
|
- const noteHeadBbox = noteHead?.getBoundingClientRect?.();
|
|
|
- if (noteHeadBbox) {
|
|
|
- item.bbox = {
|
|
|
- left: noteHeadBbox.x - parentLeft - noteHeadBbox.width / 4,
|
|
|
- width: noteHeadBbox.width * 1.5,
|
|
|
- x: item.bbox?.x,
|
|
|
- y: item.bbox?.y,
|
|
|
- originWidth: item.bbox?.width
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- } else {
|
|
|
- const needTransY = -(staveBbox.height - customBgBox.height) / 2 + "px";
|
|
|
- noteItem.bbox = {
|
|
|
- left: noteBbox.x - parentLeft - noteBbox.width / 4 + "px",
|
|
|
- top: customBgBox.y ? customBgBox.y - parentTop + "px" : staveBbox.y - parentTop + "px",
|
|
|
- width: noteBbox.width * 1.5 + "px",
|
|
|
- height: staveBbox.height + "px",
|
|
|
- x: item.bbox?.x,
|
|
|
- y: item.bbox?.y,
|
|
|
- originWidth: item.bbox?.width,
|
|
|
- transform: `translateY(${needTransY})`
|
|
|
- };
|
|
|
+ const noteHead = noteEle.querySelector(".vf-numbered-note-head");
|
|
|
+ const noteHeadBbox = noteHead?.getBoundingClientRect?.();
|
|
|
+ if (noteHeadBbox) {
|
|
|
+ item.bbox = {
|
|
|
+ left: noteHeadBbox.x - parentLeft - noteHeadBbox.width / 4,
|
|
|
+ width: noteHeadBbox.width * 1.5,
|
|
|
+ x: item.bbox?.x,
|
|
|
+ y: item.bbox?.y,
|
|
|
+ originWidth: item.bbox?.width
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
- if (selectData.notes.find((item:any) => item.id === noteItem.id)) {
|
|
|
- //
|
|
|
- } else {
|
|
|
- selectData.notes.push(noteItem);
|
|
|
+
|
|
|
+ } else {
|
|
|
+ const needTransY = -(staveBbox.height - customBgBox.height) / 2 + "px";
|
|
|
+ noteItem.bbox = {
|
|
|
+ left: noteBbox.x - parentLeft - noteBbox.width / 4 + "px",
|
|
|
+ top: customBgBox.y ? customBgBox.y - parentTop + "px" : staveBbox.y - parentTop + "px",
|
|
|
+ width: noteBbox.width * 1.5 + "px",
|
|
|
+ height: staveBbox.height + "px",
|
|
|
+ x: item.bbox?.x,
|
|
|
+ y: item.bbox?.y,
|
|
|
+ originWidth: item.bbox?.width,
|
|
|
+ transform: `translateY(${needTransY})`
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ if (selectData.notes.find((item:any) => item.id === noteItem.id)) {
|
|
|
+ //
|
|
|
+ } else {
|
|
|
+ selectData.notes.push(noteItem);
|
|
|
+ }
|
|
|
+ // selectData.notes.push(noteItem);
|
|
|
+ notesList.push(item.noteId);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!MeasureNumberXMLList.includes(item.MeasureNumberXML)) {
|
|
|
+ if (item.stave) {
|
|
|
+ if (item.stave?.attrs?.id) {
|
|
|
+ const staveEle = document.querySelector(`#${item.stave.attrs.id}`);
|
|
|
+ const list = [
|
|
|
+ Array.from(staveEle?.querySelectorAll(".vf-clef") || []),
|
|
|
+ Array.from(staveEle?.querySelectorAll(".vf-keysignature") || []),
|
|
|
+ Array.from(staveEle?.getElementsByTagName("text") || []),
|
|
|
+ ].flat();
|
|
|
+ try {
|
|
|
+ if (list.length) {
|
|
|
+ // console.log("🚀 ~ list:", list)
|
|
|
+ list.forEach((_el: any) => {
|
|
|
+ _el?.style?.setProperty("display", "none");
|
|
|
+ });
|
|
|
}
|
|
|
- // selectData.notes.push(noteItem);
|
|
|
- notesList.push(item.noteId);
|
|
|
+ } catch (error) {}
|
|
|
+
|
|
|
+ const staveBbox = staveEle?.getBoundingClientRect?.() || { x: 0, width: 0, y: 0, height: 0 };
|
|
|
+ if (i === 0) {
|
|
|
+ minMeasureHeigt = staveBbox.height
|
|
|
}
|
|
|
+ try {
|
|
|
+ if (list.length) {
|
|
|
+ list.forEach((_el: any) => {
|
|
|
+ _el?.style?.removeProperty("display");
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } catch (error) {}
|
|
|
+
|
|
|
+ // console.log("🚀 ~ staveEle:", staveBbox.height)
|
|
|
+ selectData.measureHeight = staveBbox.height
|
|
|
+ let compareVal = staveBbox.height - minMeasureHeigt
|
|
|
+ compareVal = compareVal > 0 ? compareVal : 0
|
|
|
+ noteItem.staveBox = {
|
|
|
+ left: staveBbox.x - parentLeft + "px",
|
|
|
+ // top: ((item.stave.y || 0) - 5) * state.zoom + "px",
|
|
|
+ top: staveBbox.y - parentTop + compareVal + "px",
|
|
|
+ width: staveBbox.width + "px",
|
|
|
+ height: staveBbox.height - compareVal + "px",
|
|
|
+ // background: 'rgba(0,0,0,.2)'
|
|
|
+ };
|
|
|
+ selectData.staves.push(noteItem);
|
|
|
}
|
|
|
-
|
|
|
- if (!MeasureNumberXMLList.includes(item.MeasureNumberXML)) {
|
|
|
- if (item.stave) {
|
|
|
- if (item.stave?.attrs?.id) {
|
|
|
- const staveEle = document.querySelector(`#${item.stave.attrs.id}`);
|
|
|
- const list = [
|
|
|
- Array.from(staveEle?.querySelectorAll(".vf-clef") || []),
|
|
|
- Array.from(staveEle?.querySelectorAll(".vf-keysignature") || []),
|
|
|
- Array.from(staveEle?.getElementsByTagName("text") || []),
|
|
|
- ].flat();
|
|
|
- try {
|
|
|
- if (list.length) {
|
|
|
- // console.log("🚀 ~ list:", list)
|
|
|
- list.forEach((_el: any) => {
|
|
|
- _el?.style?.setProperty("display", "none");
|
|
|
- });
|
|
|
- }
|
|
|
- } catch (error) {}
|
|
|
-
|
|
|
- const staveBbox = staveEle?.getBoundingClientRect?.() || { x: 0, width: 0, y: 0, height: 0 };
|
|
|
- if (i === 0) {
|
|
|
- minMeasureHeigt = staveBbox.height
|
|
|
+ MeasureNumberXMLList.push(item.MeasureNumberXML);
|
|
|
+ } else {
|
|
|
+ if (item.multipleRestMeasures) {
|
|
|
+ if (state.isCombineRender) {
|
|
|
+ let currentItem = null;
|
|
|
+ for (let index = 0; index < state.vfmeasures.length; index++) {
|
|
|
+ const element = state.vfmeasures[index];
|
|
|
+ const measureNum = element.getAttribute('data-num') ? Number(element.getAttribute('data-num')) : -1;
|
|
|
+ const nextMeasureNum = state.vfmeasures[index+1]?.getAttribute('data-num') ? Number(state.vfmeasures[index+1]?.getAttribute('data-num')) : -1;
|
|
|
+ if (measureNum === item.MeasureNumberXML || item.MeasureNumberXML < nextMeasureNum || nextMeasureNum == -1) {
|
|
|
+ currentItem = element
|
|
|
+ break;
|
|
|
}
|
|
|
- try {
|
|
|
- if (list.length) {
|
|
|
- list.forEach((_el: any) => {
|
|
|
- _el?.style?.removeProperty("display");
|
|
|
- });
|
|
|
- }
|
|
|
- } catch (error) {}
|
|
|
-
|
|
|
- // console.log("🚀 ~ staveEle:", staveBbox.height)
|
|
|
- selectData.measureHeight = staveBbox.height
|
|
|
- let compareVal = staveBbox.height - minMeasureHeigt
|
|
|
- compareVal = compareVal > 0 ? compareVal : 0
|
|
|
+ }
|
|
|
+ const staveBbox = currentItem?.querySelector('.vf-stave')?.getBoundingClientRect() || { x: 0, width: 0, y: 0, height: 0 };
|
|
|
+ if (currentItem) {
|
|
|
noteItem.staveBox = {
|
|
|
left: staveBbox.x - parentLeft + "px",
|
|
|
// top: ((item.stave.y || 0) - 5) * state.zoom + "px",
|
|
|
- top: staveBbox.y - parentTop + compareVal + "px",
|
|
|
+ top: staveBbox.y - parentTop + "px",
|
|
|
width: staveBbox.width + "px",
|
|
|
- height: staveBbox.height - compareVal + "px",
|
|
|
- // background: 'rgba(0,0,0,.2)'
|
|
|
+ height: staveBbox.height + "px",
|
|
|
+ // height: preItem.staveBox.height,
|
|
|
};
|
|
|
selectData.staves.push(noteItem);
|
|
|
+ MeasureNumberXMLList.push(item.MeasureNumberXML);
|
|
|
}
|
|
|
- MeasureNumberXMLList.push(item.MeasureNumberXML);
|
|
|
} else {
|
|
|
- if (item.multipleRestMeasures) {
|
|
|
- if (state.isCombineRender) {
|
|
|
- let currentItem = null;
|
|
|
- for (let index = 0; index < state.vfmeasures.length; index++) {
|
|
|
- const element = state.vfmeasures[index];
|
|
|
- const measureNum = element.getAttribute('data-num') ? Number(element.getAttribute('data-num')) : -1;
|
|
|
- const nextMeasureNum = state.vfmeasures[index+1]?.getAttribute('data-num') ? Number(state.vfmeasures[index+1]?.getAttribute('data-num')) : -1;
|
|
|
- if (measureNum === item.MeasureNumberXML || item.MeasureNumberXML < nextMeasureNum || nextMeasureNum == -1) {
|
|
|
- currentItem = element
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- const staveBbox = currentItem?.querySelector('.vf-stave')?.getBoundingClientRect() || { x: 0, width: 0, y: 0, height: 0 };
|
|
|
- if (currentItem) {
|
|
|
- noteItem.staveBox = {
|
|
|
- left: staveBbox.x - parentLeft + "px",
|
|
|
- // top: ((item.stave.y || 0) - 5) * state.zoom + "px",
|
|
|
- top: staveBbox.y - parentTop + "px",
|
|
|
- width: staveBbox.width + "px",
|
|
|
- height: staveBbox.height + "px",
|
|
|
- // height: preItem.staveBox.height,
|
|
|
- };
|
|
|
- selectData.staves.push(noteItem);
|
|
|
- MeasureNumberXMLList.push(item.MeasureNumberXML);
|
|
|
- }
|
|
|
- } else {
|
|
|
- const preItem = selectData.staves.find(
|
|
|
- (n: any) => n.MeasureNumberXML === item.MeasureNumberXML - 1
|
|
|
- );
|
|
|
- if (preItem?.staveBox) {
|
|
|
- noteItem.staveBox = {
|
|
|
- left: preItem.staveBox.left,
|
|
|
- top: preItem.staveBox.top,
|
|
|
- width: preItem.staveBox.width,
|
|
|
- // height: preItem.staveBox.height,
|
|
|
- };
|
|
|
- selectData.staves.push(noteItem);
|
|
|
- MeasureNumberXMLList.push(item.MeasureNumberXML);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
+ const preItem = selectData.staves.find(
|
|
|
+ (n: any) => n.MeasureNumberXML === item.MeasureNumberXML - 1
|
|
|
+ );
|
|
|
+ if (preItem?.staveBox) {
|
|
|
+ noteItem.staveBox = {
|
|
|
+ left: preItem.staveBox.left,
|
|
|
+ top: preItem.staveBox.top,
|
|
|
+ width: preItem.staveBox.width,
|
|
|
+ // height: preItem.staveBox.height,
|
|
|
+ };
|
|
|
+ selectData.staves.push(noteItem);
|
|
|
+ MeasureNumberXMLList.push(item.MeasureNumberXML);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
- // 部分浏览器渲染的第一小节的位置信息会包含拍号、调号，需要处理一下，剔除掉拍号、调号的位置
|
|
|
- if (selectData.staves[0]?.staveBox?.top !== selectData.staves[1]?.staveBox?.top) {
|
|
|
- selectData.staves[0].staveBox.top = selectData.staves[1]?.staveBox?.top || selectData.staves[0]?.staveBox?.top
|
|
|
- }
|
|
|
- console.log("🚀 ~ selectData.notes:", selectData.notes, selectData.staves);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 部分浏览器渲染的第一小节的位置信息会包含拍号、调号，需要处理一下，剔除掉拍号、调号的位置
|
|
|
+ if (selectData.staves[0]?.staveBox?.top !== selectData.staves[1]?.staveBox?.top) {
|
|
|
+ selectData.staves[0].staveBox.top = selectData.staves[1]?.staveBox?.top || selectData.staves[0]?.staveBox?.top
|
|
|
+ }
|
|
|
+ console.log("🚀 ~ selectData.notes:", selectData.notes, selectData.staves);
|
|
|
+};
|
|
|
+
|
|
|
+/** 重新计算 */
|
|
|
+export const recalculateNoteData = () => {
|
|
|
+ selectData.notes = [];
|
|
|
+ selectData.staves = [];
|
|
|
+ calcNoteData();
|
|
|
+};
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: "selection",
|
|
|
+ setup() {
|
|
|
+ const browsInfo = browser();
|
|
|
+ const isPad = navigator?.userAgent?.includes("UAWEIVRD-W09") || browsInfo?.iPad || browsInfo.isTablet;
|
|
|
+ const route = useRoute();
|
|
|
+ const query: any = {
|
|
|
+ ...getQuery(),
|
|
|
+ ...route.query,
|
|
|
};
|
|
|
/** 是否可以点击音符 */
|
|
|
const disableClickNote = computed(() => {
|
|
|
@@ -427,4 +436,4 @@ export default defineComponent({
|
|
|
</>
|
|
|
);
|
|
|
},
|
|
|
-});
|
|
|
+});
|
黄琪勇
