|
|
@@ -25,7 +25,6 @@ import TheIcon from "/src/components/The-icon";
|
|
|
import { cloneDeep } from "lodash";
|
|
|
import TheSpeed from "./component/the-speed";
|
|
|
import { getImage } from "./images";
|
|
|
-import { Dropdown, Dsubmenu, Doption, Trigger, Input, Select, Option } from "@arco-design/web-vue";
|
|
|
import {
|
|
|
NButton,
|
|
|
NDropdown,
|
|
|
@@ -51,6 +50,8 @@ import { useRoute } from "vue-router";
|
|
|
import { api_musicSheetCreationDetail, api_musicSheetCreationUpdate } from "../api";
|
|
|
import instrumentsNames from "/src/constant/instrmentsNames.json";
|
|
|
import { ALL_NOTES, NOTE_DOT } from "./noteData";
|
|
|
+import { Close } from "@vicons/ionicons5";
|
|
|
+import { UseDraggable } from "@vueuse/components";
|
|
|
|
|
|
const allPitches = [
|
|
|
"C,,,,",
|
|
|
@@ -186,6 +187,7 @@ export default defineComponent({
|
|
|
mearseDeleteShow: false,
|
|
|
staffShow: false, // 五线谱弹窗
|
|
|
settingShow: false, // 设置弹窗
|
|
|
+ selectMearesShow: false, // 选择小节弹窗
|
|
|
});
|
|
|
const data = reactive({
|
|
|
drawCount: 0,
|
|
|
@@ -221,6 +223,11 @@ export default defineComponent({
|
|
|
loadingAudioSrouce: false, // 加载音频资源
|
|
|
/** 移调类型 */
|
|
|
moveKeyType: "inset" as "inset" | "up" | "down", // 移调类型
|
|
|
+ selectMearesDrag: {
|
|
|
+ state: false,
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ }, // 选择小节拖拽状态
|
|
|
});
|
|
|
const noteTypes = ABC_DATA.types.map((item) => item.value).filter(Boolean);
|
|
|
const accidentals = ABC_DATA.accidentals.map((item) => item.value).filter(Boolean);
|
|
|
@@ -468,7 +475,7 @@ export default defineComponent({
|
|
|
...abcData.abcOptions,
|
|
|
visualTranspose: abcData.abc.visualTranspose,
|
|
|
})[0];
|
|
|
- if (data.drawCount <3 ){
|
|
|
+ if (data.drawCount < 3) {
|
|
|
console.log("🚀 ~ visualObj:", abcData.visualObj);
|
|
|
}
|
|
|
};
|
|
|
@@ -478,6 +485,7 @@ export default defineComponent({
|
|
|
const padding = 4;
|
|
|
for (let i = 0; i < abcData.visualObj.lines.length; i++) {
|
|
|
const line = abcData.visualObj.lines[i];
|
|
|
+ console.log("🚀 ~ line:", line);
|
|
|
for (let j = 0; j < line.staff.length; j++) {
|
|
|
const staff = line.staff[j];
|
|
|
const voices = [...staff.voices].flat();
|
|
|
@@ -503,10 +511,6 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- // const annotation = document.querySelectorAll("#paper .abcjs-annotation");
|
|
|
- // annotation.forEach((n) => {
|
|
|
- // n.setAttribute("color", "rgba(0,0,0,0)");
|
|
|
- // })
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
@@ -1859,12 +1863,16 @@ export default defineComponent({
|
|
|
</NSpin>
|
|
|
<div>{data.playState ? "暂停" : "播放"}</div>
|
|
|
</div>
|
|
|
- <div class={[styles.topBtn, styles.btnDisabled]}>
|
|
|
- <div class={styles.btnImg}>
|
|
|
+ <div
|
|
|
+ class={[styles.topBtn]}
|
|
|
+ onClick={() => (popup.selectMearesShow = !popup.selectMearesShow)}
|
|
|
+ >
|
|
|
+ <div class={[styles.btnImg, popup.selectMearesShow && styles.btnImgActive]}>
|
|
|
<img class={styles.topBtnIcon} src={getImage("icon_22.png")} />
|
|
|
</div>
|
|
|
<div>选段</div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class={[styles.topBtn, styles.btnDisabled]}>
|
|
|
<div class={styles.btnImg}>
|
|
|
<img class={styles.topBtnIcon} src={getImage("icon_23.png")} />
|
|
|
@@ -2090,6 +2098,39 @@ export default defineComponent({
|
|
|
<div ref={downRef}></div>
|
|
|
|
|
|
<TheSetting v-model:show={popup.settingShow} />
|
|
|
+
|
|
|
+ {/* <UseDraggable
|
|
|
+ initialValue={{ x: 320, y: 60 }}
|
|
|
+ class={[styles.selectMearesBox, !popup.selectMearesShow && styles.selectMearesHidden]}
|
|
|
+ >
|
|
|
+ <NSpace justify="space-between">
|
|
|
+ <div class={styles.btnLineTitle}>输入小节范围</div>
|
|
|
+ <NButton circle quaternary size="small" onClick={() => (popup.selectMearesShow = false)}>
|
|
|
+ <NIcon size={16} component={<Close />} />
|
|
|
+ </NButton>
|
|
|
+ </NSpace>
|
|
|
+ <NSpace align="center">
|
|
|
+ <div style={{ width: "200px" }}>
|
|
|
+ <NInput pair placeholder={["开始小节", "结束小节"]}></NInput>
|
|
|
+ </div>
|
|
|
+ <div class={styles.topBtn}>
|
|
|
+ <NSpin show={data.loadingAudioSrouce} size="small">
|
|
|
+ <div class={styles.btnImg} onClick={() => togglePlay(data.playState ? "pause" : "play")}>
|
|
|
+ <img
|
|
|
+ style={{ display: data.playState ? "" : "none" }}
|
|
|
+ class={styles.topBtnIcon}
|
|
|
+ src={getImage("icon_21_1.png")}
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ style={{ display: data.playState ? "none" : "" }}
|
|
|
+ class={styles.topBtnIcon}
|
|
|
+ src={getImage("icon_21.png")}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </NSpin>
|
|
|
+ </div>
|
|
|
+ </NSpace>
|
|
|
+ </UseDraggable> */}
|
|
|
</div>
|
|
|
);
|
|
|
},
|
