music-score/src/view/selection/index.tsx

import { computed, defineComponent, onMounted, reactive, Transition, nextTick, watch } from "vue";
import state, { EnumMusicRenderType, handleSelection, skipNotePlay, IPlatform } from "/src/state";
import styles from "./index.module.less";
import { metronomeData } from "/src/helpers/metronome";
import { evaluatingData } from "../evaluating";
import { leveByScoreMeasureIcons } from "../evaluating/evaluatResult";
import { Icon, showToast } from "vant";
import MoveMusicScore, { moveData, renderForMoveData } from "../plugins/move-music-score";
import { useRoute } from "vue-router";
import { getQuery } from "/src/utils/queryString";

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 = {};
			if (item.stave?.attrs?.id) {
				const staveEle = document.querySelector(`#${item.stave.attrs.id}`);
				staveBbox = staveEle?.parentElement?.parentElement?.getBoundingClientRect?.() || {
					x: 0,
					width: 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",
						};
						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,
							}
						}
						
					} else {
						noteItem.bbox = {
							left: noteBbox.x - parentLeft - noteBbox.width / 4 + "px",
							top: staveBbox.y - parentTop + "px",
							width: noteBbox.width * 1.5 + "px",
							height: staveBbox.height + "px",
						};
					}
					
				}
				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");
							});
						}
					} 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);
				}
				MeasureNumberXMLList.push(item.MeasureNumberXML);
			} else {
				if (item.multipleRestMeasures) {
					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);
					}
				}
			}
		}
	}
	console.log("🚀 ~ selectData.notes:", selectData.notes, selectData.staves);
};

/** 重新计算 */
export const recalculateNoteData = () => {
	selectData.notes = [];
	selectData.staves = [];
	calcNoteData();
};

export default defineComponent({
	name: "selection",
	setup() {
		const route = useRoute();
		const query: any = {
			...getQuery(),
			...route.query,
		};
		/** 是否可以点击音符 */
		const disableClickNote = computed(() => {
			return state.sectionStatus || state.modeType !== "practise";
		});
		// 选段符号
		const sectionPosData = computed(() => {
			if(state.sectionStatus) {
				return state.section.map(((item,index) => {
					if(index === 0){
						const currItem = selectData.staves.find(stave => {
							return stave.MeasureNumberXML === item.MeasureNumberXML	
						})
						return currItem && {
							left: currItem.staveBox.left,
							top: currItem.staveBox.top,
							height: selectData.measureHeight + 'px'  // 小节的高度
						}
					} else {
						// 实际的结束位置
						const actualEndIndex = state.userChooseEndIndex > item.MeasureNumberXML ? state.userChooseEndIndex : item.MeasureNumberXML
						const currItem = selectData.staves.find(stave => {
							return stave.MeasureNumberXML === actualEndIndex
						})
						return currItem && {
							left: parseFloat(currItem.staveBox.left)+parseFloat(currItem.staveBox.width)+"px",
							top: currItem.staveBox.top,
							height: selectData.measureHeight + 'px'
						}
					}
				}))
			}
			return []
		})
		onMounted(() => {
			selectData.notes = [];
			selectData.staves = [];
			calcNoteData();
			// 初始化谱面可移动的元素位置
			try {
			moveData.partIndex = state.partIndex + ""
			nextTick(() => renderForMoveData())
			} catch (error) {}
		});
		return () => (
			<div
				id="selectionBox"
				class={[
					styles.selectionContainer,
				]}
				onClick={(e: Event) => e.stopPropagation()}
			>
				{selectData.staves.map((item: any) => {
					const scoreItem = item.id && evaluatingData.evaluatings[item.measureListIndex];
					// for(let idx in evaluatingData.evaluatings) {
					// 	const { show, measureIndex } = evaluatingData.evaluatings[idx]
					// 	if (show && measureIndex !== item.measureListIndex) {
					// 		evaluatingData.evaluatings[idx].show = false
					// 	}
					// }
					// 高级模式下，显示节拍线
					// 不是报告模式
					// 不是多小节休止符
					// 节拍线开关
					// 当前小节
					// 当前小节
					const lineShow =
						!state.isReport &&
						metronomeData.cursorMode === 2 &&
						item.MeasureNumberXML === metronomeData.activeMetro?.measureNumberXML &&
						state.times[state.activeNoteIndex].MeasureNumberXML === item.MeasureNumberXML;
					return (
						<>
							{item.staveBox && (
								<div
									class={[
										styles.position,
										scoreItem ? `scoreItemLeve${scoreItem.leve}` : "",
										item.multipleRestMeasures <= 1 ? styles.staveBg : "",
										(state.platform === IPlatform.PC && state.zoom > 0.8) ? styles.linePC : '',
									]}
									style={item.staveBox}
									onClick={() => handleSelection(item)}
								>
									{lineShow && (
										<div style={{height: selectData.measureHeight + 'px', position: 'relative'}}>
											<div 
											class={[
												styles.line,
												state.setting.eyeProtection ? styles.eyeLine : '',
												state.musicRenderType == EnumMusicRenderType.staff ? styles.lineStaff : styles.lineJianPu,
											]} 
											style={{ left: metronomeData.activeMetro.left }}></div>
										</div>
									)}
									{!state.isReport &&
										!!item.multipleRestMeasures &&
										state.activeMeasureIndex == item.MeasureNumberXML && (
											<div class={styles.dotWrap}>{item.multipleRestMeasures}</div>
										)}
									<Transition
										name="centerTop"
										onAfterEnter={() => {
											scoreItem.show = false;
										}}
									>
										{scoreItem?.show && (
											<div
												class={styles.scoreItem}
												style={{ color: leveByScoreMeasureIcons[scoreItem.leve]?.color || "" }}
											>
												<img src={leveByScoreMeasureIcons[scoreItem.leve]?.icon} />
												<span>{scoreItem.score}</span>
											</div>
										)}
									</Transition>
								</div>
							)}
						</>
					);
				})}
				{selectData.notes.map((item: any) => {
					return (
						<div
							class={[styles.position, disableClickNote.value && styles.disable, styles.note, `noteIndex_${item.index}`]}
							style={item.bbox}
							onClick={() => skipNotePlay(item.index)}
						>
							<div class={styles.noteFollow} data-vf={"vf" + item.id}>
								<Icon name="success" />
								<Icon name="cross" />
							</div>
							<div class={[styles.noteDot, 'node-dot']}></div>
						</div>
					);
				})}
				{/* 选段 */}
				{
					sectionPosData.value.map((item,index) =>{
						return (
							item && <div class={styles.selectBox} style={item}>
								<div class={[styles.selectHandle,index>0&&styles.selectHandleRight,state.playState==="play"&&styles.playIng]} onClick={()=>{
									// 如果选择了2个 删除左边的时候
									if(state.section.length===2&&index === 0){
										state.section = []
										showToast({
											message: "请选择开始小节",
											duration: 0,
											position: "top",
											className: "selectionToast",
										});
									}else{
										state.section.splice(index,1)
										state.section = [...state.section]  // 触发 watch
										showToast({
											message: state.section.length?"请选择结束小节":"请选择开始小节",
											duration: 0,
											position: "top",
											className: "selectionToast",
										});
									}
								}}></div>
							</div>
						)
					})
				}
				{/* 移动模块 */}
				{query.isMove == "1" && <MoveMusicScore />}
			</div>
		);
	},
});