多选

src/pc/home/index.tsx

@@ -188,6 +188,11 @@ export default defineComponent({
 			uploadShow: false, // 上传弹窗
 			item: {} as any, // 上传数据
 			uploadClick: false, // 上传点击
+
+			/** 多选 */
+			multiSelect: false,
+			multiSelectList: [] as any[],
+			multilList: [] as any[],
 		});
 		const noteTypes = ABC_DATA.types.map((item) => item.value).filter(Boolean);
 		const accidentals = ABC_DATA.accidentals.map((item) => item.value).filter(Boolean);
@@ -200,16 +205,16 @@ export default defineComponent({
 		const barTypes = ABC_DATA.bar.map((item) => item.value).filter(Boolean);
 		console.log("🚀 ~ noteTypes:", noteTypes, accidentals, clefs, playTypes, dynamics);
 		const setNoteColor = () => {
-			const gs = document.querySelectorAll(`#paper svg g[fill="#0f81ff"]`);
-			Array.from(gs).forEach((g) => {
-				g.classList.remove("note_selected");
-				g.setAttribute('fill', 'currentColor')
-			})
+			// const gs = document.querySelectorAll(`#paper svg g[fill="#0f81ff"]`);
+			// Array.from(gs).forEach((g) => {
+			// 	g.classList.remove("note_selected");
+			// 	g.setAttribute("fill", "currentColor");
+			// });
 			const gs1 = document.querySelectorAll(`#paper svg g.note_selected`);
 			Array.from(gs1).forEach((g) => {
 				g.classList.remove("note_selected");
-			})
-		}
+			});
+		};
 		/** 点击音符 */
 		const clickListener = (
 			abcElem: AbcElem,
@@ -228,10 +233,10 @@ export default defineComponent({
 				noteIndex: indexStr[1],
 				isFirstChecked: true,
 			};
-			if (abcElem){
-				if (abcElem.startChar && abcElem.endChar){
+			if (abcElem) {
+				if (abcElem.startChar && abcElem.endChar) {
 					abcData.visualObj.engraver.rangeHighlight(abcElem.startChar, abcElem.endChar);
-					abcElem?.abselem?.elemset?.[0]?.classList?.add('note_selected')
+					abcElem?.abselem?.elemset?.[0]?.classList?.add("note_selected");
 				}
 			}
 
@@ -250,6 +255,25 @@ export default defineComponent({
 			}
 			data.active = active;
 
+			if (data.multiSelect) {
+				if (data.multiSelectList.length === 0) {
+					data.multiSelectList.push(active);
+				}
+				console.log("🚀 ~ data.multiSelectList:", data.multiSelectList);
+				if (data.multiSelectList.length > 0) {
+					data.multilList = [];
+					data.multiSelectList = [data.multiSelectList[0], active];
+					data.multiSelectList = data.multiSelectList.sort((a, b) => a.startChar - b.startChar);
+					data.multilList = getmutilList();
+					handleChange({ type: "multiSelect", value: "" });
+					return;
+				}
+			} else {
+				if (data.multiSelectList.length || data.multilList.length) {
+					handleClearMultiSelect();
+				}
+			}
+
 			console.log(
 				"🚀 ~ abcElem:",
 				abcElem,
@@ -274,6 +298,32 @@ export default defineComponent({
 			ABCJS.synth.playEvent(abcElem.midiPitches, abcElem.midiGraceNotePitches, 1000);
 		};
 
+		const getmutilList = () => {
+			const start = data.multiSelectList[0];
+			const end = data.multiSelectList[1];
+			const list = [] as any[];
+			for (let i = start.measureIndex; i < end.measureIndex + 1; i++) {
+				const measure = abcData.abc.measures[i];
+				for (let j = 0; j < measure.notes.length; j++) {
+					const abcElem = useIndexGetNote(`${i}.${j}`);
+					const active = {
+						...cloneDeep(abcElem),
+						measureIndex: i,
+						noteIndex: j,
+					};
+					if (start.measureIndex === i) {
+						j >= start.noteIndex && list.push(active);
+					} else if (i === end.measureIndex) {
+						j <= end.noteIndex && list.push(active);
+					} else {
+						list.push(active);
+					}
+				}
+			}
+			// console.log(list);
+			return list;
+		};
+
 		const textAreaRef = ref();
 		const abcData = reactive({
 			visualObj: null as any,
@@ -669,7 +719,8 @@ export default defineComponent({
 			// console.log(data.active.endChar, abcData.visualObj.getElementFromChar(data.active.startChar));
 			const abcElem: AbcElem = abcData.visualObj.getElementFromChar(startChar);
 			if (abcElem) {
-				abcData.visualObj.engraver.rangeHighlight(abcElem.startChar, abcElem.endChar);
+				// abcData.visualObj.engraver.rangeHighlight(abcElem.startChar, abcElem.endChar);
+				abcElem?.abselem?.elemset?.[0]?.classList?.add("note_selected");
 			}
 			return abcElem;
 		};
@@ -777,7 +828,12 @@ export default defineComponent({
 			const value = params.value;
 			const activeNote =
 				abcData.abc.measures[data.active?.measureIndex]?.notes[data.active?.noteIndex] || null;
-
+			if (type === "multiSelect") {
+				data.multilList.forEach((item: any) => {
+					item?.abselem?.elemset?.[0]?.classList?.add("note_selected");
+				});
+				return;
+			}
 			if (type === "exit") {
 				if (!data.isSave) {
 					clearTimeout(saveTimer);
@@ -1186,6 +1242,22 @@ export default defineComponent({
 			// 移动音符
 			if (type === "move") {
 				const step = value.action === "drag" ? value.step : value.action === "up" ? -1 : 1;
+				if (data.multilList.length) {
+					for (let i = 0; i < data.multilList.length; i++) {
+						const item = data.multilList[i];
+						const note = abcData.abc.measures[item.measureIndex].notes[item.noteIndex];
+						note.content = moveNote(note.content, step);
+					}
+					await handleResetRender();
+					for (let i = 0; i < data.multilList.length; i++) {
+						const item = data.multilList[i];
+						const abcElem = useIndexGetNote(`${item.measureIndex}.${item.noteIndex}`);
+						abcElem?.abselem?.elemset?.[0]?.classList?.add("note_selected");
+						if (!abcElem?.midiPitches) return;
+						ABCJS.synth.playEvent(abcElem.midiPitches, abcElem.midiGraceNotePitches, 1000);
+					}
+					return;
+				}
 				if (!activeNote) return;
 				activeNote.content = moveNote(activeNote.content, step);
 				// arr now contains elements that are either a chord, a decoration, a note name, or anything else. It can be put back to its original string with .join("").
@@ -1207,11 +1279,18 @@ export default defineComponent({
 				await handleResetRender();
 				data.active = null as unknown as INoteActive;
 			}
+			handleClearMultiSelect();
+		};
+		const handleClearMultiSelect = async () => {
+			data.multilList = [];
+			data.multiSelectList = [];
+			data.multiSelect = false;
 		};
 
 		const getNextNote = (index: number): AbcElem => {
 			const abcElem = abcData.visualObj.getElementFromChar(index);
-			if (abcElem.el_type === "note") {
+			// console.log("🚀 ~ abcElem:", index);
+			if (abcElem?.el_type === "note") {
 				return abcElem;
 			} else {
 				return getNextNote(abcElem.endChar);
@@ -1350,11 +1429,20 @@ export default defineComponent({
 					});
 				}
 			}
+
+			if (e.key.toLocaleLowerCase() === "shift") {
+				data.multiSelect = true;
+				if (data.active?.el_type === "note") {
+					data.multiSelectList = [cleanDeep(data.active)];
+				}
+			}
 		};
 
 		const handleKeyUp = (e: KeyboardEvent) => {
 			if ((e.target as HTMLElement).nodeName === "INPUT") return;
-			console.log(e.key);
+			if (e.key.toLocaleLowerCase() === "shift") {
+				data.multiSelect = false;
+			}
 
 			if (e.key === "Control" || e.key === "Meta") {
 				keyDownData.control = false;
@@ -1838,10 +1926,10 @@ export default defineComponent({
 					data.item = { ...res.data, visualObj: abcData.visualObj };
 					data.uploadShow = true;
 				} else {
-					message.info('已是最新版本')
+					message.info("已是最新版本");
 				}
 			}
-		};	
+		};
 
 		return () => (
 			<>
@@ -2656,6 +2744,7 @@ export default defineComponent({
 						</div>
 
 						<div class={styles.box}>
+							{/* <NButton type={data.multiSelect ? "primary" : "default"}>多选</NButton> */}
 							<div class={styles.titleBox}>
 								<div class={styles.titleName} style={{ width: "50%", margin: "0 auto" }}>
 									<NInput
@@ -2699,10 +2788,7 @@ export default defineComponent({
 								<NSpin description="资源加载中..."></NSpin>
 							</div>
 						)}
-						{data.saveLoadingText && (
-							<div class={styles.loading}>
-							</div>
-						)}
+						{data.saveLoadingText && <div class={styles.loading}></div>}
 					</div>
 					<div ref={downRef}></div>
 

src/pc/home/runtime.ts

@@ -220,7 +220,7 @@ export const renderMeasures = (abc: IAbc, option?: IRenderMeasuresOption) => {
 		
 		text += "\n";
 	}
-	text += "V:1 style=jianpu" + "\n";
+	// text += "V:1 style=jianpu" + "\n";
 
 	const measures = abc.measures;
 	for (let i = 0; i < measures.length; i++) {