Browse Source

feat: 谱面编辑1.5

TIANYONG 1 year ago
parent
commit
211ee769c4
1 changed files with 11 additions and 6 deletions
  1. 11 6
      src/view/plugins/move-music-score/index.tsx

+ 11 - 6
src/view/plugins/move-music-score/index.tsx

@@ -228,6 +228,7 @@ const dragData = {
 	startY: 0,
 	startY: 0,
 	x: 0,
 	x: 0,
 	y: 0,
 	y: 0,
+	repeatEdit: false,
 };
 };
 
 
 // 记录
 // 记录
@@ -247,6 +248,7 @@ function onDown(e: MouseEvent) {
 		dragData.startY = e.clientY;
 		dragData.startY = e.clientY;
 		dragData.x = item.x;
 		dragData.x = item.x;
 		dragData.y = item.y;
 		dragData.y = item.y;
+		dragData.repeatEdit = item.noteIdx >= 0 ? true : false;
 		// console.log("🚀 ~ 按下", index, el, item.x, item.y);
 		// console.log("🚀 ~ 按下", index, el, item.x, item.y);
 		document.onmousemove = onMove;
 		document.onmousemove = onMove;
 		document.onmouseup = onUp;
 		document.onmouseup = onUp;
@@ -265,7 +267,7 @@ function onMove(e: MouseEvent) {
 	if (dragData.open) {
 	if (dragData.open) {
 		const _x = e.clientX - dragData.startX + dragData.x;
 		const _x = e.clientX - dragData.startX + dragData.x;
 		const _y = e.clientY - dragData.startY + dragData.y;
 		const _y = e.clientY - dragData.startY + dragData.y;
-		setModelPostion(moveData.modelList[moveData.activeIndex], _x, _y);
+		setModelPostion(moveData.modelList[moveData.activeIndex], _x, _y, dragData.repeatEdit);
 	}
 	}
 }
 }
 function onUp(e: MouseEvent) {
 function onUp(e: MouseEvent) {
@@ -299,8 +301,9 @@ const renderSvgItem = (item: any) => {
 };
 };
 
 
 /** 设置元素位置 */
 /** 设置元素位置 */
-async function setModelPostion(item: any, x: number, y: number) {
+async function setModelPostion(item: any, x: number, y: number, repeatEdit?: boolean) {
 	// console.log(item)
 	// console.log(item)
+	//console.log('位置',x,y)
 	if (item) {
 	if (item) {
 		const g = document.querySelector("#" + item.id)!; // svg元素
 		const g = document.querySelector("#" + item.id)!; // svg元素
 		const el: HTMLElement = document.querySelector(`[data-id=${item.id}]`)!; // svg元素的背景div
 		const el: HTMLElement = document.querySelector(`[data-id=${item.id}]`)!; // svg元素的背景div
@@ -314,7 +317,7 @@ async function setModelPostion(item: any, x: number, y: number) {
 			// 	tsX = item.xRem * clientWidth/10
 			// 	tsX = item.xRem * clientWidth/10
 			// 	tsY = item.yRem * clientWidth/10
 			// 	tsY = item.yRem * clientWidth/10
 			// }
 			// }
-			if (item.noteIdx >= 0) {
+			if (item.noteIdx >= 0 && !repeatEdit) {
 				if (!moveData.noteCoords.length) {
 				if (!moveData.noteCoords.length) {
 					await initNoteCoord()
 					await initNoteCoord()
 				}
 				}
@@ -322,7 +325,7 @@ async function setModelPostion(item: any, x: number, y: number) {
 				const original = document.getElementById(item.id)?.getBoundingClientRect() || { x: 0, y: 0 };
 				const original = document.getElementById(item.id)?.getBoundingClientRect() || { x: 0, y: 0 };
 				tsX = targetX - original.x;
 				tsX = targetX - original.x;
 				tsY = targetY - original.y;
 				tsY = targetY - original.y;
-				console.log('距离',tsX,tsY,x,y)
+				// console.log('距离',tsX,tsY,x,y)
 				g && g.setAttribute("transform", `translate(${tsX / moveData.zoom}, ${tsY / moveData.zoom})`);
 				g && g.setAttribute("transform", `translate(${tsX / moveData.zoom}, ${tsY / moveData.zoom})`);
 				el && (el.style.transform = `translate(${tsX}px, ${tsY}px)`);
 				el && (el.style.transform = `translate(${tsX}px, ${tsY}px)`);
 			} else {
 			} else {
@@ -490,8 +493,10 @@ export const renderForMoveData = () => {
 						if (targetIndex == 0) preEnd = true
 						if (targetIndex == 0) preEnd = true
 						textValue = document.querySelector("#" + moveData.modelList[targetIndex].id)?.querySelector("text")?.innerHTML || ''
 						textValue = document.querySelector("#" + moveData.modelList[targetIndex].id)?.querySelector("text")?.innerHTML || ''
 					}
 					}
-					index = targetIndex + 1
-					item.id = `text${index}`
+					// index = targetIndex + 1
+					// item.id = `text${index}`
+					index = targetIndex
+					item.id = `text${targetIndex+1}`
 				}
 				}
 				console.log(66666666,index)
 				console.log(66666666,index)
 				if (index > -1) {
 				if (index > -1) {