按键

src/pc/component/keys/index.module.less

@@ -26,7 +26,7 @@
         position: relative;
         display: flex;
         width: calc(100% / 7);
-        max-width: 280px;
+        max-width: 250px;
         // background-color: #ddd;
         // box-shadow: 0 0 5px 0 #ccc;
         &:first-child{
@@ -37,7 +37,7 @@
     .item {
         position: relative;
         width: calc(100% / 7);
-        height: 180px;
+        height: 160px;
         background: #fff;
         background: linear-gradient(-30deg, #f5f5f5, #fff);
         border: 1px solid #ccc;
@@ -103,8 +103,8 @@
 
     .bkey {
         position: absolute;
-        width: calc(100% / 8);
-        height: 100px;
+        width: calc(100% / 10);
+        height: 90px;
         background: linear-gradient(-20deg, #333, #000, #333);
         border-color: #666 #222 #111 #555;
         border-style: solid;
@@ -127,23 +127,23 @@
 
     :global {
         .bkey0 {
-            left: 8%;
+            left: 9%;
         }
 
         .bkey1 {
-            left: 23%;
+            left: 24%;
         }
 
         .bkey3 {
-            left: 50%;
+            left: 51%;
         }
 
         .bkey4 {
-            left: 65%;
+            left: 66%;
         }
 
         .bkey5 {
-            left: 80%;
+            left: 81%;
         }
     }
 

src/pc/home/index.tsx

@@ -24,6 +24,7 @@ import { ALL_NOTES, NOTE_DOT } from "./noteData";
 import { Close } from "@vicons/ionicons5";
 import { UseDraggable } from "@vueuse/components";
 import { getQuery } from "/src/utils/queryString";
+import Metronome, { metronomeData } from "/src/helpers/metronome";
 
 const allPitches = [
   "C,,,,",
@@ -494,8 +495,10 @@ export default defineComponent({
           textAreaRef.value && (textAreaRef.value.value = data.music);
           data.drawCount++;
 
-          // const times = new ABCJS.TimingCallbacks(abcData.visualObj);
-          // console.log("🚀 ~ times:", times)
+          const times = new ABCJS.TimingCallbacks(abcData.visualObj);
+          console.log("🚀 ~ times:", times)
+          metronomeData.metro = new Metronome();
+          metronomeData.metro.init(times.noteTimings)
         });
       });
     };
@@ -724,9 +727,10 @@ export default defineComponent({
       if (type === "meter") {
         if (data.active) {
           if (!activeNote) return;
-          activeNote.meter = `[${value}]`;
+          const note = abcData.abc.measures[data.active.measureIndex].notes[0];
+          note.meter = `[${value}]`;
           await handleResetRender();
-          const oldNote = useIndexGetNote(`${data.active.measureIndex}.${data.active.noteIndex}`);
+          const oldNote = useIndexGetNote(`${data.active.measureIndex}.0`);
           rangeHighlight(oldNote.startChar);
         } else {
           abcData.abc.meter = value;
@@ -1113,7 +1117,7 @@ export default defineComponent({
       await api_musicSheetCreationUpdate({
         name: data.musicName,
         creator: data.creator,
-        creationConfig: data.music,
+        creationConfig: renderMeasures(abcData.abc, { hiddenIndex: true }),
         creationData: JSON.stringify(abcData.abc),
         id: data.musicId,
         subjectId: 3,
@@ -1155,6 +1159,7 @@ export default defineComponent({
         data.selectMeasures.y = rect.top + 70;
         data.selectMeasures.state = true;
       }
+
     });
     onUnmounted(() => {
       document.removeEventListener("keyup", handleKeyUp);
@@ -1916,7 +1921,7 @@ export default defineComponent({
             <div id="paper"></div>
             { !data.loading && <Keys show={data.active ? true : false} instrumentCode={abcData.abc.subjectCode} onClick={(val) => handleChange(val)} />}
 
-            {/* <textarea ref={textAreaRef} class={styles.value} id="abc"></textarea> */}
+            <textarea ref={textAreaRef} class={styles.value} id="abc"></textarea>
             <div id="audio" style={{ display: 'none' }}></div>
             <div id="warnings"></div>
 

src/pc/home/runtime.ts

@@ -179,8 +179,17 @@ export const createMeasure = (): IMeasure => {
 	};
 };
 
-/** 生成小节 */
-export const renderMeasures = (abc: IAbc) => {
+interface IRenderMeasuresOption {
+	/** 是否生成index */
+	hiddenIndex?: boolean;
+}
+/** 
+ * 生成小节
+ * @param abc
+ * 
+ * @returns
+ */
+export const renderMeasures = (abc: IAbc, option?: IRenderMeasuresOption) => {
 	// console.log("🚀 ~ abc:", abc)
 	let wrap = 1;
 	let text = `X:1\n`;
@@ -209,7 +218,9 @@ export const renderMeasures = (abc: IAbc) => {
 				// 连音线 前
 				text += note.tie;
 			}
-			text += `"<${i + "." + j}"`; // 音符 id
+			if (!option?.hiddenIndex){
+				text += `"<${i + "." + j}"`; // 音符 id
+			}
 			text += playStr; // 演奏技法
 			text += note.dynamics; // 力度符号
 			text += note.accidental; // 临时升降记号
@@ -232,7 +243,10 @@ export const renderMeasures = (abc: IAbc) => {
 			text += note.segno; // 分割
 		}
 		let _i = i + 1;
-		text += `"<${_i}"${ measure.barline}`;
+		if (!option?.hiddenIndex) {
+			text += `"<${_i}"`
+		}
+		text += `${ measure.barline}`;
 		if (wrap % 4 === 0) {
 			text += "\n";
 		}