Browse Source

fix: 简谱点击音符移动bug修复

TIANYONG 1 year ago
parent
commit
bb150098fb
2 changed files with 12 additions and 2 deletions
  1. 3 2
      src/state.ts
  2. 9 0
      src/view/selection/index.tsx

+ 3 - 2
src/state.ts

@@ -1590,7 +1590,6 @@ export const addNoteBBox = (list: any[]) => {
     //  todo  连续修止小节bug
     note.bbox = bbox;
   }
-
 }
 
 // 给歌词和音符添加动态颜色
@@ -1629,7 +1628,9 @@ export const moveSvgDom = (skipNote?: boolean) => {
    * 当前选中的音符和第一个音符之间的间距
    */
   if (skipNote) {
-    const distance = state.times[state.activeNoteIndex].bbox?.x - state.times[0].bbox?.x + state.times[state.activeNoteIndex].bbox?.width / 2 - state.times[0].bbox?.width / 2;
+    const noteWidth = state.times[state.activeNoteIndex].bbox?.originWidth || state.times[state.activeNoteIndex].bbox?.width;
+    const firstNoteWidth = state.times[0].bbox?.originWidth || state.times[0].bbox?.width;
+    const distance = state.times[state.activeNoteIndex].bbox?.x - state.times[0].bbox?.x + noteWidth / 2 - firstNoteWidth / 2;
     // 点击 清空translateXNum
     smoothAnimationState.translateXNum = 0
     moveSmoothAnimation(0, state.activeNoteIndex)

+ 9 - 0
src/view/selection/index.tsx

@@ -59,6 +59,9 @@ const calcNoteData = () => {
 							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?.();
@@ -66,6 +69,9 @@ const calcNoteData = () => {
 							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
 							}
 						}
 						
@@ -75,6 +81,9 @@ const calcNoteData = () => {
 							top: 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
 						};
 					}