merge

src/view/selection/index.tsx

@@ -50,13 +50,14 @@ export default defineComponent({
 					staveBox: null as any,
 				};
 				if (!notesList.includes(item.noteId)) {
-					let staveBbox: any = {};
+					let staveBbox: any = {}, customBgBox: any = {};
 					if (item.stave?.attrs?.id) {
 						const staveEle = document.querySelector(`#${item.stave.attrs.id}`);
 						staveBbox = staveEle?.parentElement?.parentElement?.getBoundingClientRect?.() || {
 							x: 0,
 							width: 0,
 						};
+						customBgBox = staveEle?.querySelector('.vf-custom-bg')?.getBoundingClientRect() || { y: 0, height: 0 }
 						// console.log("🚀 ~ staveBbox:", staveBbox.height)
 					}
 					if (item.svgElement) {
@@ -87,14 +88,16 @@ export default defineComponent({
 								}
 								
 							} else {
+								const needTransY = -(staveBbox.height - customBgBox.height) / 2 + "px";
 								noteItem.bbox = {
 									left: noteBbox.x - parentLeft - noteBbox.width / 4 + "px",
-									top: staveBbox.y - parentTop + "px",
+									top: customBgBox.y ? customBgBox.y - parentTop + "px" : 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
+									originWidth: item.bbox?.width,
+									transform: `translateY(${needTransY})`
 								};
 							}
 							
@@ -218,8 +221,11 @@ export default defineComponent({
 						const currItem = selectData.staves.find(stave => {
 							return stave.MeasureNumberXML === item.MeasureNumberXML	
 						})
+						// 获取stave里面vf-custom-bg的位置坐标，才是准确的坐标
+						// const currBgX = document.getElementById(currItem.stave.attrs.id)?.querySelector('.vf-custom-bg')?.getBoundingClientRect()?.x || 0;
+						const currBgX = currItem.stave?.attrs && currItem.stave.attrs.id ? document.getElementById(currItem.stave.attrs.id)?.querySelector('.vf-custom-bg')?.getBBox()?.x * state.zoom || 0 : 0;						
 						return currItem && {
-							left: currItem.staveBox.left,
+							left: currBgX ? currBgX + 'px' : currItem.staveBox.left,
 							top: currItem.staveBox.top,
 							height: selectData.measureHeight + 'px'  // 小节的高度
 						}
@@ -421,4 +427,4 @@ export default defineComponent({
 			</>
 		);
 	},
-});
+});

vite.config.ts

@@ -76,8 +76,8 @@ export default defineConfig({
         // target: "https://kt.colexiu.com",
         // target: "https://test.lexiaoya.cn",
         // target: "https://kt.colexiu.com",
-        // target: "https://test.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
-        target: "https://test.kt.colexiu.com",
+        target: "https://test.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
+        // target: "https://test.kt.colexiu.com",
         // target: "https://mec.colexiu.com",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/instrument/, ""),