restPrompt.ts 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. /**
  2. * 休止符提示器
  3. * auth: lsq
  4. * time: 2022.11.14
  5. */
  6. import { reactive } from "vue";
  7. export const restPromptData = reactive({
  8. list: [] as any[],
  9. });
  10. export const restPromptMain = (times: any[]) => {
  11. calculateMergeRest(times);
  12. };
  13. // 计算合并的休止符小节
  14. function calculateMergeRest(times: any[]) {
  15. // console.log(times);
  16. // 1. 统计所有休止的小节, 并记录五线谱休止符的小节位置和大小
  17. const measures: any[] = [];
  18. const osmdSvg: SVGAElement = document.querySelector('#osmdSvgPage1')!
  19. const viewBox = osmdSvg.getAttribute('viewBox')?.split(' ') || []
  20. let zoom: number = Number(osmdSvg.getAttribute('width')) / Number(viewBox[2])
  21. zoom = isNaN(zoom) ? 1 : zoom
  22. // console.log("🚀 ~ zoom", zoom)
  23. for (let i = 0; i < times.length; i++) {
  24. const note = times[i];
  25. const measureNumberXML = note?.noteElement?.sourceMeasure?.MeasureNumberXML || -1;
  26. const multipleRestMeasures = note?.noteElement?.sourceMeasure?.multipleRestMeasures || 0;
  27. const allRests = note?.noteElement?.sourceMeasure?.allRests || false;
  28. const hasMeasure = measures.find((n) => n.measureNumberXML === measureNumberXML);
  29. if (!hasMeasure && allRests && multipleRestMeasures > 1) {
  30. const staveBox = getStaveBox(note?.stave?.attrs?.id, zoom);
  31. // console.log("🚀 ~ note", note, stave);
  32. measures.push({
  33. measureNumberXML,
  34. allRests,
  35. multipleRestMeasures,
  36. staveBox,
  37. });
  38. }
  39. }
  40. // console.log(measures);
  41. restPromptData.list = measures;
  42. }
  43. // 获取休止符的位置
  44. function getStaveBox(id: string, zoom: number){
  45. if (!id) return {}
  46. const stave = document.querySelector('#' + id)
  47. if (stave){
  48. const bbox = (stave?.nextElementSibling as SVGAElement)?.getBBox()
  49. return {
  50. left: bbox.x * zoom + 'px',
  51. top: bbox.y * zoom + 'px',
  52. width: bbox.width * zoom + 'px',
  53. height: bbox.height * zoom + 'px'
  54. }
  55. }
  56. return {}
  57. }