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

import { computed, defineComponent, onMounted, reactive } from "vue";
import state, { gotoCustomNote, skipNotePlay } from "/src/state";
import styles from "./index.module.less";

export default defineComponent({
	name: "selection",
	setup() {
		const selectData = reactive({
			notes: [] as any[],
		});
		const calcNoteData = () => {
			const musicContainer = document.getElementById("musicContainer")?.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[] = [];
			for (let i = 0; i < notes.length; i++) {
				const item = notes[i];
				// console.log("🚀 ~ item:", item)
				const noteItem = {
					index: i,
					MeasureNumberXML: item.MeasureNumberXML,
					bbox: null as any,
					staveBox: null as any,
				};
				if (item.svgElement) {
					const noteEle = document.querySelector(`#vf-${item.svgElement?.attrs?.id}`);
					const noteEleBox = item.svgElement.getBoundingBox?.() || { h: 40 };
					// console.log("🚀 ~ noteEle:", noteEle, item.svgElement, noteEleBox.h)
					if (noteEle) {
						const noteBbox = noteEle.getBoundingClientRect?.() || { x: 0, width: 0 };
						noteItem.bbox = {
							left: noteBbox.x - parentLeft + "px",
							top: noteBbox.y - parentTop + "px",
							width: noteBbox.width + "px",
							height: noteEleBox.h * state.zoom + "px",
						};
					}
				}
				if (!MeasureNumberXMLList.includes(item.MeasureNumberXML)) {
					// console.log(item);
					if (item.stave) {
						if (item.stave?.attrs?.id) {
							const staveEle = document.querySelector(`#${item.stave.attrs.id}`);
							const staveBbox = staveEle?.getBoundingClientRect?.() || { x: 0, width: 0 };
							noteItem.staveBox = {
								left: staveBbox.x - parentLeft + "px",
								top: ((item.stave.y || 0) - 5) * state.zoom + "px",
								width: staveBbox.width + "px",
								height: 50 * state.zoom + "px",
							};
						}
						MeasureNumberXMLList.push(item.MeasureNumberXML);
					}
				}

				if (!notesList.includes(item.id)) {
					selectData.notes.push(noteItem);
					notesList.push(item.id)
				}
			}
			console.log("🚀 ~ selectData.notes:", selectData.notes);
		};
		const staveBoxList = computed(() => {
			return selectData.notes.filter((item) => item.staveBox);
		});
		onMounted(() => {
			calcNoteData();
		});
		return () => (
			<div class={styles.selectionContainer}>
				<button onClick={() => gotoCustomNote(4)}>next</button>
				<button onClick={() => state.osmd.cursor.next()}>next</button>
				{staveBoxList.value.map((item: any) => {
					// console.log(state.activeMeasureIndex , item.MeasureNumberXML, '')
					return (
						<>
							{/* <div class={styles.note} style={item.bbox}></div> */}
							{item.staveBox && <div class={[styles.position, state.activeMeasureIndex == item.MeasureNumberXML && styles.staveBox]} style={item.staveBox}></div>}
						</>
					);
				})}
				{selectData.notes.map((item: any) => {
					return <div class={[styles.position, styles.note]} style={item.bbox} onClick={() => skipNotePlay(item.index)}></div>;
				})}
			</div>
		);
	},
});