index.tsx 79 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629
  1. import { computed, defineComponent, nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
  2. import ABCJS, {
  3. AbcElem,
  4. AbcVisualParams,
  5. ClickListenerAnalysis,
  6. ClickListenerDrag,
  7. NoteTimingEvent,
  8. SynthObjectController,
  9. } from "abcjs";
  10. import "ABCJS/ABCJS-audio.css";
  11. import styles from "./index.module.less";
  12. import { showConfirmDialog, showToast } from "vant";
  13. import Keys from "../component/keys";
  14. import { Collapse, CollapseItem } from "@varlet/ui";
  15. import { IAbc, IMeasure, INote, INoteActive } from "../types";
  16. import {
  17. ABC_DATA,
  18. createMeasure,
  19. createNote,
  20. formateAbc,
  21. getKeyStep,
  22. moveNoteKey,
  23. renderMeasures,
  24. } from "./runtime";
  25. import TheIcon from "/src/components/The-icon";
  26. import { cloneDeep } from "lodash";
  27. import TheSpeed from "./component/the-speed";
  28. import { getImage } from "./images";
  29. import {
  30. NButton,
  31. NDropdown,
  32. NGi,
  33. NGrid,
  34. NIcon,
  35. NInput,
  36. NInputNumber,
  37. NModal,
  38. NPopover,
  39. NPopselect,
  40. NSelect,
  41. NSpace,
  42. NSpin,
  43. useDialog,
  44. useMessage,
  45. } from "naive-ui";
  46. import { LongArrowAltDown, LongArrowAltUp, GripLinesVertical } from "@vicons/fa";
  47. import { svg2canvas } from "/src/utils/svg2canvas";
  48. import { decodeUrl, downloadFile } from "/src/utils";
  49. import FileBtn, { IFileBtnType } from "./component/file-btn";
  50. import TheSetting from "./component/the-setting";
  51. import { useRoute } from "vue-router";
  52. import {
  53. api_musicSheetCreationDetail,
  54. api_musicSheetCreationSave,
  55. api_musicSheetCreationUpdate,
  56. api_xmlToAbc,
  57. } from "../api";
  58. import instrumentsNames from "/src/constant/instrmentsNames.json";
  59. import { ALL_NOTES, ALL_Pitches } from "./noteData";
  60. import { Close } from "@vicons/ionicons5";
  61. import { getQuery } from "/src/utils/queryString";
  62. import Metronome, { metronomeData } from "/src/helpers/metronome";
  63. import cleanDeep from "clean-deep";
  64. import { saveAs } from "file-saver";
  65. import qs from "query-string";
  66. import { useDocumentVisibility } from "@vueuse/core";
  67. import request from "/src/utils/request";
  68. export const initMusic = (total: number): IMeasure[] => {
  69. return new Array(total).fill(0).map((item, index) => {
  70. return {
  71. measureNumber: index + 1,
  72. barline: "|",
  73. celf: "",
  74. key: "",
  75. repeat: "",
  76. meter: "",
  77. notes: [
  78. {
  79. accidental: "",
  80. clef: "",
  81. meter: "",
  82. content: "z",
  83. noteType: "4",
  84. play: [],
  85. key: "",
  86. speed: "",
  87. dynamics: "",
  88. dCode: "",
  89. tie: "",
  90. tCode: "",
  91. dot: "",
  92. slus: "",
  93. tieline: "",
  94. segno: "",
  95. },
  96. ],
  97. };
  98. });
  99. };
  100. function moveNote(note: string, step: number) {
  101. var x = ALL_Pitches.indexOf(note);
  102. if (x >= 0) {
  103. const _note = ALL_Pitches[x - step];
  104. return _note ? _note : note;
  105. }
  106. return note;
  107. }
  108. export default defineComponent({
  109. name: "Home",
  110. setup() {
  111. const dialog = useDialog();
  112. const route = useRoute();
  113. const message = useMessage();
  114. const popup = reactive({
  115. instrument: false,
  116. selectSubjectShow: false, // 声部弹窗
  117. moveKeyShow: false, // 移调弹窗
  118. speedShow: false, // 节拍弹窗
  119. accidentalsShow: false, // 临时升降记号弹窗
  120. clefShow: false, // 谱号弹窗
  121. keyShow: false, // 调号弹窗
  122. meterShow: false, // 拍号弹窗
  123. playShow: false, // 演奏技法弹窗
  124. dynamicsShow: false, // 力度标记弹窗
  125. barShow: false, // 小节弹窗
  126. mearseDeleteShow: false,
  127. staffShow: false, // 五线谱弹窗
  128. settingShow: false, // 设置弹窗
  129. selectMearesShow: false, // 选择小节弹窗
  130. });
  131. const data = reactive({
  132. loading: true,
  133. drawCount: 0,
  134. isSave: true,
  135. musicId: "",
  136. musicName: "", // 曲谱名称
  137. creator: "", // 创建者
  138. subjectId: "", // 声部
  139. speed: "",
  140. music: "",
  141. playState: false, // 播放状态
  142. active: null as unknown as INoteActive,
  143. select: {
  144. state: false,
  145. list: [] as any[],
  146. parmas: null as any,
  147. },
  148. isClickNote: false,
  149. /** 音符类型 */
  150. noteType: "",
  151. /** 选择小节范围 */
  152. selectMeasures: {
  153. state: false,
  154. x: 0,
  155. y: 0,
  156. start: 1,
  157. startNote: null as any,
  158. end: 0,
  159. endNote: null as any,
  160. max: 30,
  161. },
  162. slide: ["note", "meter", "dynamics"],
  163. morePlay: false, // 更多演奏技法
  164. addMearseType: "pre" as "pre" | "next" | "finish", // 添加小节类型
  165. addMearseNumber: 1, // 添加小节数量
  166. deleteMearseType: "ing" as "ing" | "finish", // 删除小节类型
  167. loadingAudioSrouce: false, // 加载音频资源
  168. /** 移调类型 */
  169. moveKeyType: "inset" as "inset" | "up" | "down", // 移调类型
  170. activePlayNote: null as any, // 当前演奏音符
  171. times: [] as any[], // 节拍器数据
  172. undoList: [] as any[], // 撤销列表
  173. redoList: [] as any[], // 重做列表
  174. });
  175. const noteTypes = ABC_DATA.types.map((item) => item.value).filter(Boolean);
  176. const accidentals = ABC_DATA.accidentals.map((item) => item.value).filter(Boolean);
  177. const clefs = ABC_DATA.clef.map((item) => item.value).filter(Boolean);
  178. const playTypes = ABC_DATA.play.map((item) => item.value).filter(Boolean);
  179. const dynamics = ABC_DATA.dynamics
  180. .map((item) => item.value)
  181. .flat()
  182. .filter(Boolean);
  183. const barTypes = ABC_DATA.bar.map((item) => item.value).filter(Boolean);
  184. console.log("🚀 ~ noteTypes:", noteTypes, accidentals, clefs, playTypes, dynamics);
  185. /** 点击音符 */
  186. const clickListener = (
  187. abcElem: AbcElem,
  188. tuneNumber: number,
  189. classes: string,
  190. analysis: ClickListenerAnalysis,
  191. drag: ClickListenerDrag
  192. ) => {
  193. // console.log("🚀 ~ data.select.state:", data.select.state);
  194. let indexStr: any = abcElem.chord?.find((n) => n.position === "left")?.name || "";
  195. indexStr = indexStr.split(".").map((n: string) => Number(n));
  196. const active = {
  197. ...cloneDeep(abcElem),
  198. measureIndex: indexStr[0],
  199. noteIndex: indexStr[1],
  200. isFirstChecked: true,
  201. };
  202. // 选择范围模式
  203. if (data.select.state) {
  204. data.select.list.push(active);
  205. if (data.select.list.length === 1) {
  206. showToast("请先选择结束音符");
  207. }
  208. if (data.select.list.length === 2) {
  209. console.log(data.select.list);
  210. data.select.list = data.select.list.sort((a, b) => a.startChar - b.startChar);
  211. handleSelectNote();
  212. }
  213. return;
  214. }
  215. data.active = active;
  216. console.log(
  217. "🚀 ~ abcElem:",
  218. abcElem,
  219. data.music.substring(data.active.startChar, data.active.endChar)
  220. );
  221. if (data.active?.el_type === "note" && !popup.selectMearesShow) {
  222. const totalTime = (abcData.synthControl as any).visualObj.getTotalTime();
  223. if (totalTime) {
  224. const progress = (data.active as any).currentTrackMilliseconds / 1000 / totalTime;
  225. // console.log("🚀 ~ data.active:", progress);
  226. (abcData.synthControl as any).seek(progress);
  227. }
  228. }
  229. // if (abcElem.el_type === "tempo") {
  230. // abcData.visualObj.engraver.rangeHighlight(abcElem.startChar, abcElem.endChar);
  231. // }
  232. if (drag && drag.step) {
  233. handleChange({ type: "move", value: { action: "drag", step: drag.step } });
  234. return;
  235. }
  236. if (!abcElem?.midiPitches) return;
  237. ABCJS.synth.playEvent(abcElem.midiPitches, abcElem.midiGraceNotePitches, 1000);
  238. };
  239. const textAreaRef = ref();
  240. const abcData = reactive({
  241. visualObj: null as any,
  242. midiBuffer: null as unknown as ABCJS.MidiBuffer,
  243. abcOptions: {
  244. selectionColor: "#0f81ff",
  245. jazzchords: true,
  246. add_classes: true,
  247. clickListener: clickListener,
  248. responsive: "resize",
  249. dragging: true,
  250. selectTypes: ["note"],
  251. visualTranspose: 0,
  252. wrap: {
  253. minSpacing: 0.1,
  254. maxSpacing: 2.7,
  255. preferredMeasuresPerLine: 4,
  256. },
  257. staffwidth: 800,
  258. } as AbcVisualParams,
  259. synthControl: null as unknown as SynthObjectController,
  260. synthOptions: {
  261. program: 0,
  262. soundFontUrl: "https://oss.dayaedu.com/musicSheet/",
  263. // soundFontUrl: "https://paulrosen.github.io/midi-js-soundfonts/FluidR3_GM/", // 默认 FluidR3_GM
  264. // soundFontUrl: "https://paulrosen.github.io/midi-js-soundfonts/MusyngKite/", // Musyng Kite
  265. },
  266. abc: {
  267. celf: "K:treble",
  268. minUnit: "L:1/4",
  269. meter: "M:4/4",
  270. speed: "Q:1/4=60",
  271. key: "K:C",
  272. visualTranspose: 0,
  273. visualKey: "K:C",
  274. subjectCode: "acoustic_grand_piano",
  275. measures: initMusic(30),
  276. } as IAbc,
  277. });
  278. /** 添加音符 */
  279. const handleCreateNote = (measureIndex: number, noteIndex: number, options: INote) => {
  280. // console.log("🚀 ~ noteIndex:", noteIndex);
  281. const measure = abcData.abc.measures[measureIndex];
  282. if (measure) {
  283. measure.notes.splice(noteIndex + 1, 0, options);
  284. }
  285. };
  286. const hideCursor = () => {
  287. const cursor = document.querySelector("#paper svg .ABCJS-cursor");
  288. if (cursor) {
  289. cursor.setAttribute("x1", "0");
  290. cursor.setAttribute("x2", "0");
  291. cursor.setAttribute("y1", "0");
  292. cursor.setAttribute("y2", "0");
  293. }
  294. };
  295. const cursorControl = {
  296. onReady: function () {},
  297. onStart: function () {
  298. console.log("开始");
  299. data.playState = true;
  300. var svg = document.querySelector("#paper svg");
  301. let cursor = document.querySelector("#paper svg .ABCJS-cursor");
  302. if (!cursor) {
  303. cursor = document.createElementNS("http://www.w3.org/2000/svg", "line");
  304. cursor.setAttribute("class", "ABCJS-cursor");
  305. svg?.appendChild(cursor);
  306. }
  307. cursor.setAttributeNS(null, "x1", "0");
  308. cursor.setAttributeNS(null, "y1", "0");
  309. cursor.setAttributeNS(null, "x2", "0");
  310. cursor.setAttributeNS(null, "y2", "0");
  311. },
  312. onBeat: function (beatNumber: any, totalBeats: any, totalTime: any) {
  313. if (!data.playState) return;
  314. if (popup.selectMearesShow && data.selectMeasures.startNote && data.selectMeasures.endNote) {
  315. const end =
  316. totalBeats *
  317. (data.selectMeasures.endNote.milliseconds / (abcData.visualObj.getTotalTime() * 1000)) -
  318. 0.1;
  319. // console.log(beatNumber, start, end, progress);
  320. if (beatNumber >= end) {
  321. const progress =
  322. data.selectMeasures.startNote.milliseconds / (abcData.visualObj.getTotalTime() * 1000);
  323. (abcData.synthControl as any).seek(progress);
  324. return;
  325. }
  326. }
  327. // console.log("🚀 ~ beatNumber:", beatNumber, totalBeats, totalTime);
  328. const time = (beatNumber / totalBeats) * totalTime;
  329. metronomeData.metro.sound(time);
  330. },
  331. onEvent: (event: any) => {
  332. let ev = event as any;
  333. if (!data.playState) return;
  334. if (ev.measureStart && ev.left === null) return; // this was the second part of a tie across a measure line. Just ignore it.
  335. data.activePlayNote = { ...ev };
  336. var cursor = document.querySelector("#paper svg .ABCJS-cursor");
  337. if (cursor) {
  338. cursor.setAttribute("x1", ev.left + ev.width / 2);
  339. cursor.setAttribute("x2", ev.left + ev.width / 2);
  340. cursor.setAttribute("y1", ev.top);
  341. cursor.setAttribute("y2", ev.top + ev.height);
  342. }
  343. },
  344. onFinished: function () {
  345. console.log("finished");
  346. data.playState = false;
  347. var els = document.querySelectorAll("svg .highlight");
  348. for (var i = 0; i < els.length; i++) {
  349. els[i].classList.remove("highlight");
  350. }
  351. hideCursor();
  352. },
  353. };
  354. const staffNotes = ALL_NOTES();
  355. const loadMiniMp3 = async () => {
  356. data.loadingAudioSrouce = true;
  357. const midiBuffer = new ABCJS.synth.CreateSynth();
  358. const str = `X: 1\nM:4/4\nL:1/4\n${staffNotes}`;
  359. const visualObj = ABCJS.parseOnly(str);
  360. await midiBuffer.init({
  361. visualObj: visualObj[0],
  362. options: { ...abcData.synthOptions },
  363. });
  364. };
  365. const resetMidi = (useActive = false) => {
  366. const midiBuffer = new ABCJS.synth.CreateSynth();
  367. midiBuffer
  368. .init({
  369. visualObj: abcData.visualObj,
  370. options: { ...abcData.synthOptions },
  371. })
  372. .then(() => {
  373. abcData.synthControl
  374. .setTune(abcData.visualObj, useActive, {
  375. midiTranspose: abcData.abc.visualTranspose,
  376. program: abcData.synthOptions.program,
  377. })
  378. .then(function (response) {
  379. data.loadingAudioSrouce = false;
  380. // console.log("Audio successfully loaded.", {...abcData.synthControl});
  381. // console.log("🚀 ~ abcData.synthControl:", abcData.synthControl);
  382. })
  383. .catch((err) => {
  384. console.log(err);
  385. });
  386. });
  387. };
  388. const togglePlay = async (type: "play" | "pause" | "reset") => {
  389. if (type === "play") {
  390. if (popup.selectMearesShow) {
  391. if (
  392. data.selectMeasures.start > data.selectMeasures.end ||
  393. !data.selectMeasures.startNote ||
  394. !data.selectMeasures.endNote
  395. ) {
  396. data.selectMeasures.start = 0;
  397. data.selectMeasures.end = 0;
  398. data.selectMeasures.startNote = null;
  399. data.selectMeasures.endNote = null;
  400. message.warning("请输入正确的小节范围");
  401. data.selectMeasures.state = false;
  402. nextTick(() => {
  403. data.selectMeasures.state = true;
  404. });
  405. return;
  406. }
  407. if (!(abcData.synthControl as any).isLoaded) {
  408. (abcData.synthControl as any).runWhenReady(() => {
  409. const progress =
  410. data.selectMeasures.startNote.milliseconds / (abcData.visualObj.getTotalTime() * 1000);
  411. (abcData.synthControl as any).seek(progress);
  412. });
  413. } else {
  414. const progress =
  415. data.selectMeasures.startNote.milliseconds / (abcData.visualObj.getTotalTime() * 1000);
  416. (abcData.synthControl as any).seek(progress);
  417. }
  418. }
  419. abcData.synthControl.play();
  420. data.playState = true;
  421. } else if (type === "pause") {
  422. abcData.synthControl.play();
  423. // abcData.synthControl.pause();
  424. data.playState = false;
  425. hideCursor();
  426. const totalTime = (abcData.synthControl as any).visualObj.getTotalTime();
  427. if (totalTime && data.activePlayNote?.milliseconds !== undefined) {
  428. const progress = data.activePlayNote.milliseconds / 1000 / totalTime;
  429. nextTick(() => {
  430. (abcData.synthControl as any).seek(progress);
  431. });
  432. }
  433. } else {
  434. abcData.synthControl.restart();
  435. nextTick(() => {
  436. if (popup.selectMearesShow) {
  437. if (
  438. data.selectMeasures.start > data.selectMeasures.end ||
  439. !data.selectMeasures.startNote ||
  440. !data.selectMeasures.endNote
  441. ) {
  442. data.selectMeasures.start = 0;
  443. data.selectMeasures.end = 0;
  444. data.selectMeasures.startNote = null;
  445. data.selectMeasures.endNote = null;
  446. message.warning("请输入正确的小节范围");
  447. data.selectMeasures.state = false;
  448. nextTick(() => {
  449. data.selectMeasures.state = true;
  450. });
  451. return;
  452. }
  453. if (!(abcData.synthControl as any).isLoaded) {
  454. (abcData.synthControl as any).runWhenReady(() => {
  455. const progress =
  456. data.selectMeasures.startNote.milliseconds / (abcData.visualObj.getTotalTime() * 1000);
  457. (abcData.synthControl as any).seek(progress);
  458. });
  459. } else {
  460. const progress =
  461. data.selectMeasures.startNote.milliseconds / (abcData.visualObj.getTotalTime() * 1000);
  462. (abcData.synthControl as any).seek(progress);
  463. }
  464. }
  465. if (!data.playState) {
  466. abcData.synthControl.play();
  467. }
  468. });
  469. }
  470. // console.log("🚀 ~ abcData.synthControl:", abcData.synthControl.timer.noteTimings);
  471. };
  472. const renderSvg = () => {
  473. abcData.visualObj = ABCJS.renderAbc("paper", data.music, {
  474. ...abcData.abcOptions,
  475. visualTranspose: abcData.abc.visualTranspose,
  476. })[0];
  477. if (data.drawCount < 3) {
  478. console.log("🚀 ~ visualObj:", abcData.visualObj);
  479. }
  480. };
  481. const renderBoxRect = () => {
  482. const svg = document.querySelector("#paper svg");
  483. const padding = 4;
  484. let measureNumber = 0;
  485. for (let i = 0; i < abcData.visualObj.lines.length; i++) {
  486. const line = abcData.visualObj.lines[i];
  487. // console.log("🚀 ~ line:", line);
  488. for (let j = 0; j < line.staff.length; j++) {
  489. const staff = line.staff[j];
  490. const voices = [...staff.voices].flat();
  491. for (let l = 0; l < voices.length; l++) {
  492. const item = voices[l];
  493. if (item.el_type === "bar") {
  494. measureNumber++;
  495. }
  496. // console.log(item.el_type);
  497. if (["note", "keySignature", "clef", "timeSignature"].includes(item.el_type)) {
  498. const box = item.abselem.elemset?.[0]?.getBBox?.() || null;
  499. // console.log("🚀 ~ box:", item.abselem, box);
  500. if (box) {
  501. const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  502. rect.setAttributeNS(null, "x", box.x - padding + "");
  503. rect.setAttributeNS(null, "y", box.y - padding + "");
  504. rect.setAttributeNS(null, "width", box.width + padding * 2 + "");
  505. rect.setAttributeNS(null, "height", box.height + padding * 2 + "");
  506. rect.setAttributeNS(null, "fill", "rgba(0,0,0,0)");
  507. rect.setAttributeNS(null, "stroke", "rgba(0,0,0,0)");
  508. rect.setAttributeNS(null, "rx", "2");
  509. rect.classList.add("abcjs-note-hover");
  510. svg?.appendChild(rect);
  511. }
  512. }
  513. }
  514. }
  515. }
  516. console.log(measureNumber);
  517. data.selectMeasures.max = measureNumber;
  518. };
  519. let saveTimer: any = null;
  520. const autoSave = () => {
  521. saveTimer && clearTimeout(saveTimer);
  522. saveTimer = setTimeout(() => {
  523. handleSaveMusic(false);
  524. }, 15000);
  525. };
  526. /**
  527. * @param isProduct 是否是生成曲谱
  528. */
  529. const handleResetRender = () => {
  530. if (data.drawCount > 0) {
  531. abcData.synthControl.disable(true);
  532. if (data.playState) {
  533. data.playState = false;
  534. }
  535. data.isSave = false;
  536. }
  537. if (popup.selectMearesShow) {
  538. data.selectMeasures.startNote = null;
  539. data.selectMeasures.endNote = null;
  540. data.selectMeasures.start = 0;
  541. data.selectMeasures.end = 0;
  542. popup.selectMearesShow = false;
  543. data.selectMeasures.state = false;
  544. nextTick(() => {
  545. data.selectMeasures.state = true;
  546. });
  547. }
  548. return new Promise((resolve) => {
  549. nextTick(() => {
  550. data.music = renderMeasures(abcData.abc);
  551. renderSvg();
  552. resetMidi(data.drawCount > 0 ? true : false);
  553. renderBoxRect();
  554. try {
  555. productMetronomeData();
  556. } catch (error) {
  557. console.log("🚀 ~ error:", error);
  558. }
  559. resolve(1);
  560. if (data.drawCount > 0) {
  561. const host = location.host;
  562. if (host.includes("localhost") || host.includes("192")) return;
  563. autoSave();
  564. }
  565. textAreaRef.value && (textAreaRef.value.value = data.music);
  566. data.drawCount++;
  567. });
  568. });
  569. };
  570. /** 生成曲谱节拍器数据 */
  571. const productMetronomeData = () => {
  572. const times = new ABCJS.TimingCallbacks(abcData.visualObj);
  573. data.times = times.noteTimings;
  574. const list: any[] = [];
  575. let meter = abcData.abc.meter || "";
  576. // length - 1是为了去除最后一个空的结束事件
  577. for (let i = 0; i < times.noteTimings.length - 1; i++) {
  578. const timeNote = times.noteTimings[i];
  579. const abcNote = getNextNote(timeNote.startChar as number);
  580. let indexStr: any = abcNote.chord?.find((n) => n.position === "left")?.name || "";
  581. indexStr = indexStr.split(".").map((n: string) => Number(n));
  582. if (indexStr.length === 2) {
  583. const measure = abcData.abc.measures[indexStr[0]];
  584. // 如果小节里面有拍号,后面一直延用这个拍号,以此类推, ps: 下个版本
  585. // if (measure.meter){
  586. // meter = measure.meter;
  587. // }
  588. const reg = new RegExp(/M:(\d+)\/\d+/);
  589. const numerator = Number(meter.match(reg)?.[1]);
  590. // console.log("🚀 ~ reg:", meter.match(reg)?.[1], abcData.abc.meter)
  591. // console.log("🚀 ~ measure:", measure)
  592. const note = measure.notes[indexStr[1]];
  593. list.push({
  594. ...note,
  595. timeNote,
  596. abcNote,
  597. measure: {
  598. numerator,
  599. },
  600. });
  601. }
  602. }
  603. // console.log("abcData.abc.measures", list);
  604. if (!metronomeData.metro) {
  605. metronomeData.metro = new Metronome();
  606. }
  607. try {
  608. metronomeData.activeIndex = -1;
  609. metronomeData.metro.init(list);
  610. } catch (error) {
  611. console.log("🚀 ~ 生成节拍器数据错误:", error);
  612. }
  613. };
  614. // 高亮选中的音符
  615. const rangeHighlight = (startChar: number) => {
  616. // console.log(data.active.endChar, abcData.visualObj.getElementFromChar(data.active.startChar));
  617. const abcElem: AbcElem = abcData.visualObj.getElementFromChar(startChar);
  618. if (abcElem) {
  619. abcData.visualObj.engraver.rangeHighlight(abcElem.startChar, abcElem.endChar);
  620. }
  621. return abcElem;
  622. };
  623. const useIndexGetNote = (indexStr: string) => {
  624. const index = data.music.indexOf(indexStr);
  625. const note = abcData.visualObj.getElementFromChar(index);
  626. return note;
  627. };
  628. const getMeasureNotes = (measureIndex: number) => {
  629. const measure = abcData.abc.measures[measureIndex];
  630. const notes = [];
  631. for (let k = 0; k < measure.notes.length; k++) {
  632. const indexStr = `${measureIndex}.${k}`;
  633. const note = useIndexGetNote(indexStr);
  634. notes.push(note);
  635. }
  636. return notes;
  637. };
  638. const handleClose = () => {
  639. // 判断是否在应用中
  640. console.log("点击退出", window.matchMedia("(display-mode: standalone)").matches);
  641. if (window.matchMedia("(display-mode: standalone)").matches) {
  642. window.onbeforeunload = null;
  643. console.log("准备发消息");
  644. window.parent.postMessage(
  645. {
  646. api: "notation_exit",
  647. },
  648. "*"
  649. );
  650. } else {
  651. window.close();
  652. // 全屏模式无法判断是否在应用打开
  653. // 那就都发个消息吧
  654. window.parent.postMessage(
  655. {
  656. api: "notation_exit",
  657. },
  658. "*"
  659. );
  660. }
  661. };
  662. /**
  663. *
  664. * @param key
  665. * @param type note 音符 accidental 临时升降记号
  666. * @returns
  667. */
  668. const handleChange = async (params: { type: string; value: any }) => {
  669. // 最多记录30步
  670. if (data.undoList.length > 30) {
  671. data.undoList.shift();
  672. }
  673. data.undoList.push(cleanDeep(abcData.abc));
  674. abcData.synthControl.disable(true);
  675. if (data.playState) {
  676. data.playState = false;
  677. }
  678. const type = params.type;
  679. const value = params.value;
  680. const activeNote =
  681. abcData.abc.measures[data.active?.measureIndex]?.notes[data.active?.noteIndex] || null;
  682. if (type === "exit") {
  683. if (!data.isSave) {
  684. clearTimeout(saveTimer);
  685. dialog.warning({
  686. maskClosable: true,
  687. autoFocus: false,
  688. class: "deleteDialog saveDialog",
  689. title: "温馨提示",
  690. content: "是否保存当前曲谱?",
  691. positiveText: "保存",
  692. positiveButtonProps: {
  693. type: "primary",
  694. },
  695. negativeText: "不保存",
  696. negativeButtonProps: {
  697. type: "default",
  698. ghost: false,
  699. },
  700. onPositiveClick: async () => {
  701. const msg = message.loading("保存中...");
  702. await handleSaveMusic(false);
  703. setTimeout(() => {
  704. msg.type = "success";
  705. msg.content = "保存成功";
  706. setTimeout(() => {
  707. msg.destroy();
  708. handleClose();
  709. }, 500);
  710. }, 300);
  711. },
  712. onNegativeClick: () => {
  713. handleClose();
  714. },
  715. });
  716. return;
  717. }
  718. handleClose();
  719. }
  720. // console.log(params, activeNote);
  721. if (type === "type") {
  722. // 设置音符类型
  723. data.noteType = value;
  724. if (activeNote) {
  725. activeNote.noteType = value;
  726. await handleResetRender();
  727. const abcElem: AbcElem = rangeHighlight(data.active.startChar);
  728. const active: any = abcElem
  729. ? {
  730. ...cloneDeep(abcElem),
  731. measureIndex: data.active.measureIndex,
  732. noteIndex: data.active.noteIndex,
  733. isFirstChecked: true,
  734. }
  735. : null;
  736. data.active = active;
  737. }
  738. return;
  739. }
  740. // 分割
  741. if (type === "segno") {
  742. if (!data.active) {
  743. showToast("请先选择音符");
  744. return;
  745. }
  746. if (!activeNote) return;
  747. activeNote.segno = activeNote.segno ? "" : value;
  748. await handleResetRender();
  749. rangeHighlight(data.active.startChar);
  750. }
  751. // 修改音符,或者添加音符
  752. if (type === "note") {
  753. if (data.active && data.active.el_type == "note") {
  754. const activeNote =
  755. abcData.abc.measures[data.active.measureIndex]?.notes[data.active.noteIndex] || null;
  756. const _values = value.split("-");
  757. if (data.active.isFirstChecked) {
  758. activeNote.content = _values[0];
  759. activeNote.noteType = data.noteType;
  760. if (_values[1]) {
  761. activeNote.accidental = _values[1] || "";
  762. }
  763. data.active.isFirstChecked = false;
  764. }
  765. await handleResetRender();
  766. const oldNote = useIndexGetNote(`${data.active.measureIndex}.${data.active.noteIndex}`);
  767. if (oldNote?.abselem?.beam?.elems?.length) {
  768. // 判断是否需要分割beam
  769. const elems: AbcElem[] = oldNote.abselem.beam.elems;
  770. const beatDuration = abcData.visualObj.getBeatLength();
  771. const beamLength = elems.map((n) => n.duration).reduce((a, b) => a + b);
  772. if (beamLength >= beatDuration) {
  773. abcData.abc.measures[data.active.measureIndex].notes[data.active.noteIndex].segno = " ";
  774. await handleResetRender();
  775. }
  776. }
  777. if (oldNote?.midiPitches) {
  778. ABCJS.synth.playEvent(oldNote.midiPitches, oldNote.midiGraceNotePitches, 1000);
  779. }
  780. const nextNote =
  781. abcData.abc.measures[data.active.measureIndex]?.notes[data.active.noteIndex + 1];
  782. if (nextNote) {
  783. const abcNextElem: AbcElem = useIndexGetNote(
  784. `${data.active.measureIndex}.${data.active.noteIndex + 1}`
  785. );
  786. rangeHighlight(abcNextElem.startChar);
  787. data.active = {
  788. ...abcNextElem,
  789. measureIndex: data.active.measureIndex,
  790. noteIndex: data.active.noteIndex + 1,
  791. isFirstChecked: true,
  792. };
  793. } else {
  794. const notes = getMeasureNotes(data.active.measureIndex);
  795. const duration = notes.map((n) => n.duration).reduce((a, b) => a + b);
  796. if (duration >= 1) {
  797. // 小节内音符总时值过长,自动跳转到下一小节
  798. const nextMeasureNote = abcData.abc.measures[data.active.measureIndex + 1]?.notes[0];
  799. if (nextMeasureNote) {
  800. const abcNextElem: AbcElem = useIndexGetNote(`${data.active.measureIndex + 1}.${0}`);
  801. rangeHighlight(abcNextElem.startChar);
  802. data.active = {
  803. ...abcNextElem,
  804. measureIndex: data.active.measureIndex + 1,
  805. noteIndex: 0,
  806. isFirstChecked: true,
  807. };
  808. } else {
  809. // 到最后一个小节的最后一个音符了
  810. rangeHighlight(data.active.startChar);
  811. data.active.isFirstChecked = true;
  812. }
  813. } else {
  814. handleCreateNote(
  815. data.active.measureIndex,
  816. data.active.noteIndex,
  817. createNote({
  818. content: "z",
  819. noteType: data.noteType,
  820. })
  821. );
  822. await handleResetRender();
  823. const newNote = useIndexGetNote(
  824. `${data.active.measureIndex}.${data.active.noteIndex + 1}`
  825. );
  826. rangeHighlight(newNote.startChar);
  827. data.active = {
  828. ...newNote,
  829. measureIndex: data.active.measureIndex,
  830. noteIndex: data.active.noteIndex + 1,
  831. isFirstChecked: true,
  832. };
  833. }
  834. }
  835. }
  836. }
  837. // 临时升降记号
  838. if (type === "accidentals") {
  839. if (!data.active) {
  840. message.warning("请先选择音符");
  841. return;
  842. }
  843. if (activeNote.content === "z") {
  844. message.warning("休止符无法添加临时升降记号");
  845. return;
  846. }
  847. activeNote.accidental = activeNote.accidental == value ? "" : value;
  848. await handleResetRender();
  849. const abcElem: AbcElem = rangeHighlight(data.active.startChar);
  850. const active: any = abcElem
  851. ? {
  852. ...cloneDeep(abcElem),
  853. measureIndex: data.active.measureIndex,
  854. noteIndex: data.active.noteIndex,
  855. isFirstChecked: true,
  856. }
  857. : null;
  858. data.active = active;
  859. }
  860. // 谱号
  861. if (type === "clef") {
  862. if (data.active) {
  863. if (!activeNote) return;
  864. activeNote.clef = `[${value}]`;
  865. await handleResetRender();
  866. } else {
  867. abcData.abc.celf = value;
  868. handleResetRender();
  869. }
  870. }
  871. // 调号
  872. if (type === "key") {
  873. if (data.active) {
  874. if (!activeNote) return;
  875. activeNote.key = `[${value}]`;
  876. await handleResetRender();
  877. } else {
  878. abcData.abc.key = value;
  879. await handleResetRender();
  880. }
  881. }
  882. // 拍号
  883. if (type === "meter") {
  884. if (data.active && data.active.measureIndex !== 0) {
  885. if (!activeNote) return;
  886. const measure = abcData.abc.measures[data.active.measureIndex];
  887. measure.meter = `[${value}]`;
  888. await handleResetRender();
  889. const oldNote = useIndexGetNote(`${data.active.measureIndex}.${data.active.noteIndex}`);
  890. rangeHighlight(oldNote.startChar);
  891. } else {
  892. abcData.abc.meter = value;
  893. await handleResetRender();
  894. }
  895. }
  896. // 演奏技法
  897. if (type === "play") {
  898. if (!data.active) {
  899. message.warning("请先选择音符");
  900. return;
  901. }
  902. if (!activeNote) return;
  903. if (activeNote.play.includes(value)) {
  904. activeNote.play = activeNote.play.filter((item) => item !== value);
  905. } else {
  906. activeNote.play.push(value);
  907. }
  908. await handleResetRender();
  909. rangeHighlight(data.active.startChar);
  910. }
  911. // 力度标记,渐强渐弱
  912. if (type === "dynamics") {
  913. if (!data.active) {
  914. message.info("请先选择音符");
  915. return;
  916. }
  917. if (!activeNote) return;
  918. if (Array.isArray(value)) {
  919. if (activeNote?.dynamics) {
  920. activeNote.dynamics = "";
  921. for (let i = 0; i < abcData.abc.measures.length; i++) {
  922. const measure = abcData.abc.measures[i];
  923. for (let j = 0; j < measure.notes.length; j++) {
  924. const note = measure.notes[j];
  925. if (note.dCode === activeNote.dCode) {
  926. note.dynamics = "";
  927. }
  928. }
  929. }
  930. await handleResetRender();
  931. } else {
  932. data.select.list = [cloneDeep(data.active)];
  933. data.select.state = true;
  934. data.select.parmas = params;
  935. message.info("请选择结束音符");
  936. }
  937. return;
  938. }
  939. if (activeNote.dynamics === value) {
  940. activeNote.dynamics = "";
  941. } else {
  942. activeNote.dynamics = value;
  943. }
  944. await handleResetRender();
  945. rangeHighlight(data.active.startChar);
  946. }
  947. // 延音
  948. if (type === "tie") {
  949. if (!data.active) {
  950. message.info("请先选择音符");
  951. return;
  952. }
  953. if (!activeNote) return;
  954. if (Array.isArray(value)) {
  955. if (activeNote?.tie) {
  956. activeNote.tie = "";
  957. for (let i = 0; i < abcData.abc.measures.length; i++) {
  958. const measure = abcData.abc.measures[i];
  959. for (let j = 0; j < measure.notes.length; j++) {
  960. const note = measure.notes[j];
  961. if (note.tCode === activeNote.tCode) {
  962. note.tie = "";
  963. }
  964. }
  965. }
  966. await handleResetRender();
  967. return;
  968. } else {
  969. data.select.list = [cloneDeep(data.active)];
  970. data.select.state = true;
  971. data.select.parmas = params;
  972. message.info("请选择结束音符");
  973. return;
  974. }
  975. }
  976. const abcElem: any = getNextNote(data.active.endChar);
  977. if (activeNote.tieline) {
  978. activeNote.tieline = "";
  979. } else {
  980. if (data.active.averagepitch != abcElem.averagepitch) {
  981. message.warning("必须同音高才能添加延音线");
  982. return;
  983. }
  984. activeNote.tieline = value;
  985. }
  986. await handleResetRender();
  987. rangeHighlight(data.active.startChar);
  988. }
  989. // 反复
  990. if (type === "repeat") {
  991. if (!data.active) {
  992. return;
  993. }
  994. const activeMeasure = abcData.abc.measures[data.active.measureIndex] || null;
  995. if (!activeMeasure) return;
  996. if (activeMeasure.repeat === value) {
  997. activeMeasure.repeat = "";
  998. } else {
  999. activeMeasure.repeat = value;
  1000. }
  1001. await handleResetRender();
  1002. rangeHighlight(data.active.startChar + value.length);
  1003. }
  1004. // 小节线
  1005. if (type === "barline") {
  1006. if (!data.active) {
  1007. return;
  1008. }
  1009. const activeMeasure = abcData.abc.measures[data.active.measureIndex] || null;
  1010. if (!activeMeasure) return;
  1011. // 如果是开始重复,就修改前一个小节的barline
  1012. if (value === "|:") {
  1013. const prevMeasure = abcData.abc.measures[data.active.measureIndex - 1] || null;
  1014. if (!prevMeasure) return;
  1015. prevMeasure.barline = value;
  1016. } else {
  1017. activeMeasure.barline = value;
  1018. }
  1019. await handleResetRender();
  1020. }
  1021. // 速度
  1022. if (type === "speeds") {
  1023. if (data.active) {
  1024. if (data.active.measureIndex === 0 && data.active.noteIndex === 0) {
  1025. abcData.abc.speed = value;
  1026. await handleResetRender();
  1027. } else {
  1028. const activeNote =
  1029. abcData.abc.measures[data.active.measureIndex]?.notes[data.active.noteIndex] || null;
  1030. if (!activeNote) return;
  1031. activeNote.speed = `[${value}]`;
  1032. await handleResetRender();
  1033. }
  1034. rangeHighlight(data.active.startChar);
  1035. } else {
  1036. abcData.abc.speed = value;
  1037. await handleResetRender();
  1038. }
  1039. }
  1040. // 附点
  1041. if (type === "dot") {
  1042. if (!data.active) {
  1043. showToast("请先选择音符");
  1044. return;
  1045. }
  1046. if (!activeNote) return;
  1047. activeNote.dot = activeNote.dot ? "" : value;
  1048. // activeNote.dot = activeNote.dot ? "" : NOTE_DOT[activeNote.noteType];
  1049. await handleResetRender();
  1050. rangeHighlight(data.active.startChar);
  1051. }
  1052. // 3连音
  1053. if (type === "slus") {
  1054. const activeNote =
  1055. abcData.abc.measures[data.active.measureIndex]?.notes[data.active.noteIndex] || null;
  1056. if (!activeNote) return;
  1057. activeNote.slus = activeNote.slus === value ? "" : value;
  1058. await handleResetRender();
  1059. rangeHighlight(data.active.startChar);
  1060. }
  1061. // 移动音符
  1062. if (type === "move") {
  1063. const step = value.action === "drag" ? value.step : value.action === "up" ? -1 : 1;
  1064. if (!activeNote) return;
  1065. activeNote.content = moveNote(activeNote.content, step);
  1066. // 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("").
  1067. await handleResetRender();
  1068. const _abcElem = rangeHighlight(data.active.startChar);
  1069. if (!_abcElem?.midiPitches) return;
  1070. ABCJS.synth.playEvent(_abcElem.midiPitches, _abcElem.midiGraceNotePitches, 1000);
  1071. }
  1072. // 删除音符
  1073. if (type === "delete") {
  1074. if (!data.active) return;
  1075. if (data.active.startChar === 0) return;
  1076. abcData.abc.measures[data.active.measureIndex].notes.splice(data.active.noteIndex, 1);
  1077. if (abcData.abc.measures[data.active.measureIndex].notes.length === 0) {
  1078. abcData.abc.measures.splice(data.active.measureIndex, 1);
  1079. }
  1080. await handleResetRender();
  1081. data.active = null as unknown as INoteActive;
  1082. }
  1083. };
  1084. const getNextNote = (index: number): AbcElem => {
  1085. const abcElem = abcData.visualObj.getElementFromChar(index);
  1086. if (abcElem.el_type === "note") {
  1087. return abcElem;
  1088. } else {
  1089. return getNextNote(abcElem.endChar);
  1090. }
  1091. };
  1092. const handleDeleteNote = () => {
  1093. if (!data.active) return;
  1094. if (data.active.startChar === 0) return;
  1095. abcData.abc.measures[data.active.measureIndex].notes.splice(data.active.noteIndex, 1);
  1096. if (abcData.abc.measures[data.active.measureIndex].notes.length === 0) {
  1097. abcData.abc.measures.splice(data.active.measureIndex, 1);
  1098. }
  1099. handleResetRender();
  1100. data.active = null as unknown as INoteActive;
  1101. };
  1102. const clearSelectNote = () => {
  1103. data.active = null as unknown as INoteActive;
  1104. const notes = document.querySelectorAll(".abcjs-note_selected");
  1105. notes.forEach((item) => {
  1106. item.classList.remove("abcjs-note_selected");
  1107. item.setAttribute("fill", "currentColor");
  1108. });
  1109. };
  1110. const handleSelectNote = async () => {
  1111. const type = data.select.parmas?.type;
  1112. const value = data.select.parmas?.value;
  1113. const startItem = data.select.list[0];
  1114. const endItem = data.select.list[1];
  1115. // 力度标记,渐强渐弱
  1116. if (type === "dynamics") {
  1117. if (
  1118. abcData.abc.measures[endItem.measureIndex].notes[endItem.noteIndex].dynamics ||
  1119. abcData.abc.measures[startItem.measureIndex].notes[startItem.noteIndex].dynamics
  1120. ) {
  1121. message.warning("已经添加了力度标记");
  1122. } else {
  1123. const crescendo = Date.now() + "";
  1124. abcData.abc.measures[startItem.measureIndex].notes[startItem.noteIndex].dynamics = value[0];
  1125. abcData.abc.measures[startItem.measureIndex].notes[startItem.noteIndex].dCode = crescendo;
  1126. abcData.abc.measures[endItem.measureIndex].notes[endItem.noteIndex].dynamics = value[1];
  1127. abcData.abc.measures[endItem.measureIndex].notes[endItem.noteIndex].dCode = crescendo;
  1128. await handleResetRender();
  1129. }
  1130. }
  1131. // 连音
  1132. if (type === "tie") {
  1133. const crescendo = Date.now() + "";
  1134. if (abcData.abc.measures[startItem.measureIndex].notes[startItem.noteIndex].tie) {
  1135. const tie = abcData.abc.measures[startItem.measureIndex].notes[startItem.noteIndex].tie;
  1136. abcData.abc.measures[startItem.measureIndex].notes[startItem.noteIndex].tie = value[0] + tie;
  1137. } else {
  1138. abcData.abc.measures[startItem.measureIndex].notes[startItem.noteIndex].tie = value[0];
  1139. abcData.abc.measures[startItem.measureIndex].notes[startItem.noteIndex].tCode = crescendo;
  1140. }
  1141. if (abcData.abc.measures[endItem.measureIndex].notes[endItem.noteIndex].tie) {
  1142. const tie = abcData.abc.measures[endItem.measureIndex].notes[endItem.noteIndex].tie;
  1143. abcData.abc.measures[endItem.measureIndex].notes[endItem.noteIndex].tie = tie + value[1];
  1144. } else {
  1145. abcData.abc.measures[endItem.measureIndex].notes[endItem.noteIndex].tie = value[1];
  1146. abcData.abc.measures[endItem.measureIndex].notes[endItem.noteIndex].tCode = crescendo;
  1147. }
  1148. await handleResetRender();
  1149. }
  1150. data.select.state = false;
  1151. data.select.list = [];
  1152. data.select.parmas = null;
  1153. clearSelectNote();
  1154. message.destroyAll();
  1155. };
  1156. /** 移调 */
  1157. const handleMoveKey = async (item: (typeof ABC_DATA.key)[0]) => {
  1158. // const moveData = getKeyStep(item.value, abcData.abc.key, data.moveKeyType);
  1159. // console.log("🚀 ~ item:", abcData.abc.key, "=>", item.value, moveData);
  1160. // 将所有的音符移调
  1161. // for (let i = 0; i < abcData.abc.measures.length; i++) {
  1162. // const measure = abcData.abc.measures[i];
  1163. // for (let j = 0; j < measure.notes.length; j++) {
  1164. // const note = measure.notes[j];
  1165. // if (note.content == "z") continue;
  1166. // const content = moveNoteKey(note.content, moveData);
  1167. // const _a = content.substring(0, 1);
  1168. // if (_a === "^" || _a === "_") {
  1169. // note.content = content.substring(1);
  1170. // } else {
  1171. // note.content = content;
  1172. // }
  1173. // console.log("🚀 ~ note.content:", note.content);
  1174. // }
  1175. // }
  1176. // // console.log(abcData.abc.visualTranspose, item.step, item.value)
  1177. // abcData.abc.key = item.value;
  1178. // const step =
  1179. // data.moveKeyType === "up"
  1180. // ? item.step > 0
  1181. // ? item.step
  1182. // : item.step + 12
  1183. // : data.moveKeyType === "down"
  1184. // ? item.step < 0
  1185. // ? item.step
  1186. // : item.step + 12
  1187. // : item.step;
  1188. abcData.abc.visualTranspose = item.step;
  1189. abcData.abc.visualKey = item.value;
  1190. popup.moveKeyShow = false;
  1191. if (data.playState) {
  1192. abcData.synthControl.disable(true);
  1193. data.playState = false;
  1194. }
  1195. await handleResetRender();
  1196. };
  1197. const keyDownData = reactive({
  1198. wait: false,
  1199. control: false,
  1200. });
  1201. const handleKeyDonw = async (e: KeyboardEvent) => {
  1202. if ((e.target as HTMLElement).nodeName === "INPUT") return;
  1203. if (e.key === "Control" || e.key === "Meta") {
  1204. keyDownData.control = true;
  1205. }
  1206. if (e.key === "z" && keyDownData.control && !keyDownData.wait) {
  1207. if (data.undoList.length) {
  1208. abcData.abc = cloneDeep(data.undoList[data.undoList.length - 1]);
  1209. data.undoList.pop();
  1210. keyDownData.wait = true;
  1211. await handleResetRender();
  1212. nextTick(() => {
  1213. keyDownData.wait = false;
  1214. });
  1215. }
  1216. }
  1217. };
  1218. const handleKeyUp = (e: KeyboardEvent) => {
  1219. if ((e.target as HTMLElement).nodeName === "INPUT") return;
  1220. console.log(e.key);
  1221. if (e.key === "Control" || e.key === "Meta") {
  1222. keyDownData.control = false;
  1223. }
  1224. if (!data.active) return false;
  1225. if (e.key === "Backspace") {
  1226. handleChange({ type: "delete", value: "" });
  1227. }
  1228. if (/^[A-Ga-g]$/.test(e.key)) {
  1229. handleChange({ type: "note", value: e.key.toLocaleUpperCase() });
  1230. }
  1231. if (["ArrowUp", "ArrowDown"].includes(e.key)) {
  1232. e.preventDefault();
  1233. e.stopPropagation();
  1234. handleChange({ type: "move", value: { action: e.key === "ArrowUp" ? "up" : "donw" } });
  1235. return false;
  1236. }
  1237. };
  1238. /** 重置曲谱 */
  1239. const handleCreateSvg = () => {
  1240. abcData.abc.measures = initMusic(30);
  1241. handleResetRender();
  1242. };
  1243. const instruments = computed(() => {
  1244. return ABCJS.synth.instrumentIndexToName.map((name, index) => ({
  1245. label: instrumentsNames[name as keyof typeof instrumentsNames],
  1246. value: index,
  1247. }));
  1248. });
  1249. const instrumentName = computed(() => {
  1250. const code = ABCJS.synth.instrumentIndexToName[abcData.synthOptions.program];
  1251. return instrumentsNames[code as keyof typeof instrumentsNames];
  1252. });
  1253. const getDetailData = async () => {
  1254. const query = getQuery();
  1255. data.loading = true;
  1256. const res = await api_musicSheetCreationDetail(query.id);
  1257. if (res?.code == 200) {
  1258. data.musicId = res.data.id || "";
  1259. data.musicName = res.data.name || "";
  1260. data.creator = res.data.creator || "";
  1261. let abc = "" as any;
  1262. try {
  1263. abc = JSON.parse(res.data.creationData);
  1264. } catch (error) {
  1265. console.log(error);
  1266. }
  1267. if (abc) {
  1268. console.log("🚀 ~ abc:", abc);
  1269. data.musicName = abc.title ?? data.musicName;
  1270. abcData.abc.celf = abc.celf || "K:treble";
  1271. abcData.abc.key = abc.key.value || abc.key || "K:C";
  1272. abcData.abc.meter = abc.meter.value || abc.meter || "M:4/4";
  1273. abcData.abc.speed = abc.speed || "Q:1/4=60";
  1274. abcData.abc.visualTranspose = abc.visualTranspose || 0;
  1275. abcData.abc.visualKey = abc.visualKey || "K:C";
  1276. abcData.abc.subjectCode = abc.subjectCode || "acoustic_grand_piano";
  1277. const _instruments = ABCJS.synth.instrumentIndexToName.indexOf(abcData.abc.subjectCode as any);
  1278. abcData.synthOptions.program = _instruments > -1 ? _instruments : 0;
  1279. abcData.abc.measures = abc.measures || initMusic(30);
  1280. // console.log("🚀 ~ abcData.abc:", abcData.abc);
  1281. }
  1282. }
  1283. data.loading = false;
  1284. return res;
  1285. };
  1286. const handleSaveMusic = async (tips = true) => {
  1287. const query = getQuery();
  1288. abcData.abc.title = data.musicName;
  1289. abcData.abc.creator = data.creator;
  1290. if (query.id) {
  1291. await api_musicSheetCreationUpdate({
  1292. name: data.musicName,
  1293. creator: data.creator,
  1294. creationConfig: renderMeasures(abcData.abc, {
  1295. hiddenIndex: true,
  1296. showTitle: true,
  1297. showCreator: true,
  1298. }),
  1299. creationData: JSON.stringify(cleanDeep(abcData.abc)),
  1300. id: query.id,
  1301. subjectId: "",
  1302. });
  1303. } else {
  1304. const res = await api_musicSheetCreationSave({
  1305. name: data.musicName,
  1306. creator: data.creator,
  1307. creationConfig: renderMeasures(abcData.abc, {
  1308. hiddenIndex: true,
  1309. showTitle: true,
  1310. showCreator: true,
  1311. }),
  1312. creationData: JSON.stringify(cleanDeep(abcData.abc)),
  1313. subjectId: "",
  1314. });
  1315. if (res?.data) {
  1316. const hash = location.hash.split("?");
  1317. const qs_data = qs.parse(hash[1]);
  1318. qs_data.id = res.data;
  1319. try {
  1320. delete qs_data.config;
  1321. } catch (error) {
  1322. console.log("🚀 ~ error:", error);
  1323. }
  1324. location.hash = hash[0] + "?" + qs.stringify(qs_data);
  1325. }
  1326. }
  1327. if (tips) {
  1328. message.success("保存成功");
  1329. }
  1330. data.isSave = true;
  1331. };
  1332. const hanldeInitCreate = () => {
  1333. const query = getQuery();
  1334. const abc = decodeUrl(query.config);
  1335. console.log("🚀 ~ abc:", abc);
  1336. abcData.abc.celf = abc.celf ?? "K:treble";
  1337. abcData.abc.key = abc.key ?? "K:C";
  1338. abcData.abc.meter = abc.meter ?? "M:4/4";
  1339. abcData.abc.speed = abc.speed ?? "Q:1/4=80";
  1340. abcData.abc.visualTranspose = abc.visualTranspose ?? 0;
  1341. abcData.abc.subjectCode = abc.subjectCode ?? "acoustic_grand_piano";
  1342. const _instruments = ABCJS.synth.instrumentIndexToName.indexOf(abcData.abc.subjectCode as any);
  1343. abcData.synthOptions.program = _instruments > -1 ? _instruments : 0;
  1344. abcData.abc.measures = initMusic(abc.measure ?? 30);
  1345. data.loading = false;
  1346. };
  1347. const visibility = useDocumentVisibility();
  1348. watch(
  1349. () => visibility.value,
  1350. (val: any) => {
  1351. if (val === "hidden") {
  1352. if (data.playState) {
  1353. togglePlay("pause");
  1354. }
  1355. }
  1356. }
  1357. );
  1358. onMounted(async () => {
  1359. const query = getQuery();
  1360. if (query.id) {
  1361. await getDetailData();
  1362. } else {
  1363. hanldeInitCreate();
  1364. }
  1365. if (ABCJS.synth.supportsAudio()) {
  1366. abcData.synthControl = new ABCJS.synth.SynthController();
  1367. // console.log("🚀 ~ abcData.synthControl:", abcData.synthControl)
  1368. abcData.synthControl.load("#audio", cursorControl, {
  1369. displayLoop: true,
  1370. displayRestart: true,
  1371. displayPlay: true,
  1372. displayProgress: true,
  1373. });
  1374. }
  1375. console.log(ABCJS);
  1376. await handleResetRender();
  1377. loadMiniMp3();
  1378. document.addEventListener("keyup", handleKeyUp);
  1379. document.addEventListener("keydown", handleKeyDonw);
  1380. window.onbeforeunload = (e) => {
  1381. if (!data.isSave) {
  1382. e.preventDefault();
  1383. e.returnValue = "还有没保存的";
  1384. }
  1385. };
  1386. abcData.synthControl.restart();
  1387. const selectMearesBtn = document.querySelector("#selectMearesBtn");
  1388. if (selectMearesBtn) {
  1389. const rect = selectMearesBtn.getBoundingClientRect();
  1390. data.selectMeasures.x = document.body.clientWidth - 320;
  1391. data.selectMeasures.y = rect.top + 70;
  1392. data.selectMeasures.state = true;
  1393. }
  1394. });
  1395. onUnmounted(() => {
  1396. document.removeEventListener("keyup", handleKeyUp);
  1397. document.removeEventListener("keydown", handleKeyDonw);
  1398. });
  1399. const measureComputed = computed(() => {
  1400. if (!data.active) return {} as unknown as IMeasure;
  1401. const activeMeasure = abcData.abc.measures[data.active.measureIndex] || {};
  1402. return activeMeasure;
  1403. });
  1404. const noteComputed = computed(() => {
  1405. if (!data.active) return {} as unknown as INote;
  1406. const activeNote =
  1407. abcData.abc.measures[data.active.measureIndex]?.notes[data.active.noteIndex] || {};
  1408. return activeNote;
  1409. });
  1410. /** 新建曲谱 */
  1411. const handleCreateMusic = () => {
  1412. showConfirmDialog({
  1413. title: "温馨提示",
  1414. message: "是否覆盖当前乐谱?",
  1415. }).then(() => {
  1416. handleCreateSvg();
  1417. data.active = null as unknown as INoteActive;
  1418. });
  1419. };
  1420. /** 添加小节 */
  1421. const handleAddMearse = () => {
  1422. for (let i = 0; i < data.addMearseNumber; i++) {
  1423. if (["pre", "next"].includes(data.addMearseType)) {
  1424. if (!data.active) {
  1425. message.warning("请选择小节");
  1426. return;
  1427. }
  1428. if (data.addMearseType === "pre") {
  1429. abcData.abc.measures.splice(data.active.measureIndex, 0, createMeasure());
  1430. } else if (data.addMearseType === "next") {
  1431. abcData.abc.measures.splice(data.active.measureIndex + 1, 0, createMeasure());
  1432. }
  1433. } else {
  1434. abcData.abc.measures.push(createMeasure());
  1435. }
  1436. }
  1437. popup.barShow = false;
  1438. handleResetRender();
  1439. };
  1440. const handleDeleteMearse = () => {
  1441. if (data.deleteMearseType === "ing") {
  1442. if (!data.active) {
  1443. message.warning("请选择小节");
  1444. return;
  1445. }
  1446. abcData.abc.measures.splice(data.active.measureIndex, 1);
  1447. } else if (data.deleteMearseType === "finish") {
  1448. let len = abcData.abc.measures.length;
  1449. for (let i = len; i > 0; i--) {
  1450. if (
  1451. abcData.abc.measures[i - 1].notes.length === 1 &&
  1452. abcData.abc.measures[i - 1].notes[0].content === "z"
  1453. ) {
  1454. if (abcData.abc.measures.length === 1) {
  1455. break;
  1456. }
  1457. abcData.abc.measures.splice(i - 1, 1);
  1458. } else {
  1459. break;
  1460. }
  1461. }
  1462. }
  1463. popup.mearseDeleteShow = false;
  1464. handleResetRender();
  1465. };
  1466. const downPng = async () => {
  1467. abcData.abc.title = `T:${data.musicName}`;
  1468. abcData.abc.creator = `R:${data.creator}`;
  1469. const paper = document.getElementById("exportPng");
  1470. if (!paper) return;
  1471. const abc = renderMeasures(abcData.abc, { hiddenIndex: true, showTitle: true, showCreator: true });
  1472. ABCJS.renderAbc(paper, abc, abcData.abcOptions);
  1473. const svg: any = paper.children[0]?.cloneNode(true);
  1474. const svgBox = paper.getBoundingClientRect();
  1475. svg.setAttribute("width", `${svgBox.width * 3}`);
  1476. svg.setAttribute("height", `${svgBox.height * 3}`);
  1477. const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  1478. rect.setAttribute("x", "0");
  1479. rect.setAttribute("y", "0");
  1480. rect.setAttribute("width", `${svgBox.width * 10}`);
  1481. rect.setAttribute("height", `${svgBox.height * 10}`);
  1482. rect.setAttribute("fill", "#fff");
  1483. svg.prepend(rect);
  1484. if (svg) {
  1485. const _canvas = svg2canvas(svg.outerHTML);
  1486. // document.body.appendChild(_canvas);
  1487. let el: any = document.createElement("a");
  1488. // 设置 href 为图片经过 base64 编码后的字符串,默认为 png 格式
  1489. el.href = _canvas.toDataURL();
  1490. el.download = data.musicName + ".png";
  1491. // 创建一个点击事件并对 a 标签进行触发
  1492. const event = new MouseEvent("click");
  1493. el.dispatchEvent(event);
  1494. }
  1495. };
  1496. const downRef = ref();
  1497. const downMidi = () => {
  1498. const midi = ABCJS.synth.getMidiFile(abcData.visualObj, {
  1499. chordsOff: true,
  1500. midiOutputType: "link",
  1501. fileName: "曲谱",
  1502. });
  1503. // console.log("🚀 ~ midi:", midi)
  1504. downRef.value.innerHTML = midi;
  1505. downRef.value.querySelector("a").click();
  1506. };
  1507. const downWav = () => {
  1508. try {
  1509. if (abcData.synthControl) {
  1510. abcData.synthControl.download("曲谱.wav");
  1511. }
  1512. } catch (error) {
  1513. const midiBuffer = new ABCJS.synth.CreateSynth();
  1514. midiBuffer
  1515. .init({
  1516. visualObj: abcData.visualObj,
  1517. options: abcData.synthOptions,
  1518. })
  1519. .then(() => {
  1520. midiBuffer.prime().then(() => {
  1521. // console.log(midiBuffer.download());
  1522. downloadFile(midiBuffer.download(), "曲谱.wav");
  1523. });
  1524. });
  1525. }
  1526. };
  1527. const downXML = async () => {
  1528. const msg = message.loading("导出中...");
  1529. await handleSaveMusic(false);
  1530. const res = await getDetailData();
  1531. if (!res?.data?.xml) {
  1532. msg.type = "error";
  1533. msg.content = "导出失败";
  1534. return;
  1535. }
  1536. saveAs(res.data.xml, (data.musicName || "曲谱") + ".xml");
  1537. msg.type = "success";
  1538. msg.content = "导出成功";
  1539. };
  1540. const handleDownFile = (type: IFileBtnType) => {
  1541. if (type === "png") {
  1542. downPng();
  1543. } else if (type === "midi") {
  1544. downMidi();
  1545. } else if (type === "wav") {
  1546. downWav();
  1547. } else if (type === "down-xml") {
  1548. downXML();
  1549. }
  1550. };
  1551. const handleExport = () => {
  1552. const input = document.createElement("input");
  1553. input.type = "file";
  1554. input.accept = ".xml,.musicxml";
  1555. input.onchange = async (e: any) => {
  1556. data.loadingAudioSrouce = true;
  1557. const file = e.target.files[0];
  1558. // const formData = new FormData();
  1559. // formData.append("xmlFile", file);
  1560. // const res = await api_xmlToAbc(formData);
  1561. // console.log("🚀 ~ res:", res.data)
  1562. const reader = new FileReader();
  1563. reader.onload = async (e: any) => {
  1564. let abc = e.target.result;
  1565. abc = new DOMParser().parseFromString(abc, "text/xml");
  1566. // // console.log("🚀 ~ abc:", abc);
  1567. abc = (window as any).vertaal(abc, { p: "f", t: 1, u: 0, v: 3, mnum: 0 });
  1568. // console.log('abc', abc);
  1569. const parseData = ABCJS.renderAbc("importRef", abc[0], { responsive: "resize" });
  1570. console.log("🚀 ~ parseData:", parseData);
  1571. abcData.abc = formateAbc(parseData[0], { subjectCode: abcData.abc.subjectCode });
  1572. data.musicName = abcData.abc.title || data.musicName;
  1573. data.creator = abcData.abc.creator || data.creator;
  1574. await handleResetRender();
  1575. data.loadingAudioSrouce = false;
  1576. };
  1577. reader.readAsText(file);
  1578. };
  1579. input.click();
  1580. };
  1581. /** 设置选段小节 */
  1582. const handleSetSelectMeares = (index: number | null, type: "start" | "end") => {
  1583. console.log("🚀 ~ index:", index);
  1584. if (data.playState) {
  1585. togglePlay("pause");
  1586. }
  1587. if (type === "start") {
  1588. let note = index ? useIndexGetNote(`${index - 1}.0`) : null;
  1589. note = data.times.find((_note: any) => _note.startChar === note.startChar);
  1590. // console.log("🚀 ~ note:", note, data.times);
  1591. data.selectMeasures.start = index ? index - 1 : 0;
  1592. data.selectMeasures.startNote = note;
  1593. if (
  1594. data.selectMeasures.start &&
  1595. data.selectMeasures.end &&
  1596. data.selectMeasures.end < data.selectMeasures.start
  1597. ) {
  1598. data.selectMeasures.end = 0;
  1599. data.selectMeasures.endNote = null;
  1600. }
  1601. } else {
  1602. let note = index ? useIndexGetNote(`${index}.0`) : null;
  1603. note = data.times.find((_note: any) => _note.startChar === note.startChar);
  1604. // console.log("🚀 ~ note:", note);
  1605. data.selectMeasures.end = index ? index - 1 : 0;
  1606. data.selectMeasures.endNote = note;
  1607. if (
  1608. data.selectMeasures.start &&
  1609. data.selectMeasures.end &&
  1610. data.selectMeasures.start > data.selectMeasures.end
  1611. ) {
  1612. // console.log(data.selectMeasures.start, data.selectMeasures.end);
  1613. data.selectMeasures.start = 0;
  1614. data.selectMeasures.startNote = null;
  1615. }
  1616. }
  1617. };
  1618. return () => (
  1619. <>
  1620. <div class={styles.container}>
  1621. <div class={styles.containerTop} onKeyup={(e: Event) => e.stopPropagation()}>
  1622. <div class={styles.topWrap}>
  1623. <div class={styles.topBtn} onClick={() => handleChange({ type: "exit", value: "exit" })}>
  1624. <div class={[styles.btnImg]}>
  1625. <img class={styles.topBtnIcon} src={getImage("icon_-1.png")} />
  1626. </div>
  1627. <div>退出</div>
  1628. </div>
  1629. <div class={styles.topBtn}>
  1630. <FileBtn
  1631. onSelect={(val: IFileBtnType) => {
  1632. if (val === "newMusic") {
  1633. handleCreateMusic();
  1634. } else if (val === "save") {
  1635. handleSaveMusic();
  1636. } else if (["xml"].includes(val)) {
  1637. handleExport();
  1638. } else if (val === "upload") {
  1639. } else if (["png", "midi", "wav", "down-xml"].includes(val)) {
  1640. handleDownFile(val);
  1641. } else if (val === "print") {
  1642. }
  1643. // else if (val === "exit") {
  1644. // }
  1645. }}
  1646. />
  1647. <div>文件</div>
  1648. </div>
  1649. <div class={styles.topLine}></div>
  1650. <div class={styles.topBtn} onClick={() => handleChange({ type: "dot", value: ">" })}>
  1651. <div class={[styles.btnImg, noteComputed.value.dot === ">" && styles.btnImgActive]}>
  1652. <img class={styles.topBtnIcon} src={getImage("icon_1.png")} />
  1653. </div>
  1654. <div>附点</div>
  1655. </div>
  1656. <div class={styles.topLine}></div>
  1657. {ABC_DATA.accidentals.map((item) => (
  1658. <div
  1659. class={styles.topBtn}
  1660. onClick={() => handleChange({ type: "accidentals", value: item.value })}
  1661. >
  1662. <div
  1663. class={[
  1664. styles.btnImg,
  1665. noteComputed.value.accidental === item.value && styles.btnImgActive,
  1666. ]}
  1667. >
  1668. <img class={styles.topBtnIcon} src={item.icon} />
  1669. </div>
  1670. <div class={styles.btnName}>{item.name}</div>
  1671. </div>
  1672. ))}
  1673. <div class={styles.topLine}></div>
  1674. <div
  1675. class={styles.topBtn}
  1676. onClick={() => handleChange({ type: "tie", value: ABC_DATA.tie[0].value })}
  1677. >
  1678. <div
  1679. class={[
  1680. styles.btnImg,
  1681. noteComputed.value.tieline === ABC_DATA.tie[0].value && styles.btnImgActive,
  1682. ]}
  1683. >
  1684. <img class={styles.topBtnIcon} src={ABC_DATA.tie[0].icon} />
  1685. </div>
  1686. <div>{ABC_DATA.tie[0].name}</div>
  1687. </div>
  1688. <div
  1689. class={styles.topBtn}
  1690. onClick={() => handleChange({ type: "tie", value: ABC_DATA.tie[1].value })}
  1691. >
  1692. <div
  1693. class={[
  1694. styles.btnImg,
  1695. ABC_DATA.tie[1].value.includes(noteComputed.value.tie) && styles.btnImgActive,
  1696. ]}
  1697. >
  1698. <img class={styles.topBtnIcon} src={ABC_DATA.tie[1].icon} />
  1699. </div>
  1700. <div>{ABC_DATA.tie[1].name}</div>
  1701. </div>
  1702. <div class={styles.topLine}></div>
  1703. {ABC_DATA.play.slice(0, 4).map((item) => (
  1704. <div
  1705. class={[styles.topBtn]}
  1706. onClick={() => handleChange({ type: "play", value: item.value })}
  1707. >
  1708. <div
  1709. class={[
  1710. styles.btnImg,
  1711. noteComputed.value.play?.includes(item.value) && styles.btnImgActive,
  1712. ]}
  1713. >
  1714. <img class={styles.topBtnIcon} src={item.icon} />
  1715. </div>
  1716. <div>{item.name}</div>
  1717. </div>
  1718. ))}
  1719. <NPopover
  1720. class={styles.popupWrap}
  1721. showArrow={false}
  1722. trigger="click"
  1723. contentStyle={{ width: "400px" }}
  1724. >
  1725. {{
  1726. trigger: () => (
  1727. <div class={styles.topDownArrow}>
  1728. <img src={getImage("icon_arrow.png")} />
  1729. </div>
  1730. ),
  1731. default: () => (
  1732. <NGrid cols={4} yGap={8}>
  1733. {ABC_DATA.play.slice(4).map((item) => (
  1734. <NGi>
  1735. <div
  1736. class={[
  1737. styles.btnItem,
  1738. noteComputed.value.play?.includes(item.value) && styles.btnItemActive,
  1739. ]}
  1740. onClick={() => {
  1741. data.morePlay = false;
  1742. handleChange({ type: "play", value: item.value });
  1743. }}
  1744. >
  1745. <div class={styles.btnItemIcon}>
  1746. <TheIcon iconClassName={item.icon} />
  1747. </div>
  1748. <div>{item.name}</div>
  1749. </div>
  1750. </NGi>
  1751. ))}
  1752. </NGrid>
  1753. ),
  1754. }}
  1755. </NPopover>
  1756. <div class={styles.topLine}></div>
  1757. <NDropdown
  1758. trigger="click"
  1759. options={ABC_DATA.slus as any}
  1760. labelField="name"
  1761. keyField="value"
  1762. onSelect={(val) => {
  1763. console.log(val);
  1764. handleChange({ type: "slus", value: val });
  1765. }}
  1766. >
  1767. <div class={[styles.topBtn]}>
  1768. <div class={styles.btnImg}>
  1769. <img class={styles.topBtnIcon} src={getImage("icon_13.png")} />
  1770. </div>
  1771. <div>连音</div>
  1772. </div>
  1773. </NDropdown>
  1774. <div class={[styles.topBtn, styles.btnDisabled]}>
  1775. <div class={styles.btnImg}>
  1776. <img class={styles.topBtnIcon} src={getImage("icon_14.png")} />
  1777. </div>
  1778. <div>翻转</div>
  1779. </div>
  1780. <div class={styles.topLine}></div>
  1781. <NPopover
  1782. class={styles.popupWrap}
  1783. showArrow={false}
  1784. v-model:show={popup.selectSubjectShow}
  1785. trigger="click"
  1786. contentStyle={{ width: "320px" }}
  1787. >
  1788. {{
  1789. trigger: () => (
  1790. <div class={styles.topBtn}>
  1791. <div class={styles.btnImg} onClick={() => (popup.instrument = true)}>
  1792. <img class={styles.topBtnIcon} src={getImage("icon_25.png")} />
  1793. </div>
  1794. <div
  1795. style={{
  1796. overflow: "hidden",
  1797. textOverflow: "ellipsis",
  1798. whiteSpace: "nowrap",
  1799. maxWidth: "60px",
  1800. }}
  1801. >
  1802. {instrumentName.value}
  1803. </div>
  1804. </div>
  1805. ),
  1806. default: () => (
  1807. <>
  1808. <div class={styles.btnLineTitle}>选择声部</div>
  1809. <NSelect
  1810. filterable
  1811. options={instruments.value}
  1812. v-model:value={abcData.synthOptions.program}
  1813. onUpdate:value={() => {
  1814. abcData.synthControl.pause();
  1815. data.playState = false;
  1816. nextTick(async () => {
  1817. await loadMiniMp3();
  1818. resetMidi(true);
  1819. popup.selectSubjectShow = false;
  1820. abcData.abc.subjectCode =
  1821. ABCJS.synth.instrumentIndexToName[abcData.synthOptions.program];
  1822. autoSave();
  1823. });
  1824. }}
  1825. ></NSelect>
  1826. </>
  1827. ),
  1828. }}
  1829. </NPopover>
  1830. <NPopover
  1831. class={styles.popupWrap}
  1832. showArrow={false}
  1833. v-model:show={popup.moveKeyShow}
  1834. trigger="click"
  1835. contentStyle={{ width: "320px" }}
  1836. >
  1837. {{
  1838. trigger: () => (
  1839. <div class={styles.topBtn}>
  1840. <div class={styles.btnImg}>
  1841. <img class={styles.topBtnIcon} src={getImage("icon_15.png")} />
  1842. </div>
  1843. <div>移调</div>
  1844. </div>
  1845. ),
  1846. default: () => (
  1847. <>
  1848. <div class={styles.btnLineTitle}>移调方式</div>
  1849. <NSpace>
  1850. <NButton
  1851. secondary
  1852. type={data.moveKeyType === "inset" ? "primary" : "default"}
  1853. onClick={() => (data.moveKeyType = "inset")}
  1854. >
  1855. <NIcon component={GripLinesVertical} />
  1856. 最靠近
  1857. </NButton>
  1858. <NButton
  1859. secondary
  1860. type={data.moveKeyType === "down" ? "primary" : "default"}
  1861. onClick={() => (data.moveKeyType = "down")}
  1862. >
  1863. <NIcon component={LongArrowAltDown} />
  1864. 向下移调
  1865. </NButton>
  1866. <NButton
  1867. secondary
  1868. type={data.moveKeyType === "up" ? "primary" : "default"}
  1869. onClick={() => (data.moveKeyType = "up")}
  1870. >
  1871. <NIcon component={LongArrowAltUp} />
  1872. 向上移调
  1873. </NButton>
  1874. </NSpace>
  1875. <div class={styles.btnLineTitle}>目标音调</div>
  1876. <NGrid cols={5} yGap={8}>
  1877. {ABC_DATA.key
  1878. .sort((a, b) => b.step - a.step)
  1879. .map((item) => (
  1880. <NGi>
  1881. <div
  1882. class={[
  1883. styles.btnItem,
  1884. abcData.abc.visualKey === item.value && styles.btnItemActive,
  1885. ]}
  1886. onClick={() => handleMoveKey(item)}
  1887. >
  1888. <div class={[styles.btnItemIcon]}>
  1889. <TheIcon iconClassName={item.icon} />
  1890. </div>
  1891. <div class={styles.btnItemName}>{item.name}</div>
  1892. </div>
  1893. </NGi>
  1894. ))}
  1895. </NGrid>
  1896. </>
  1897. ),
  1898. }}
  1899. </NPopover>
  1900. <NPopover
  1901. class={styles.popupWrap}
  1902. showArrow={false}
  1903. v-model:value={popup.speedShow}
  1904. trigger="click"
  1905. placement="bottom"
  1906. displayDirective="show"
  1907. >
  1908. {{
  1909. trigger: () => (
  1910. <div class={[styles.topBtn]}>
  1911. <div class={styles.btnImg}>
  1912. <img class={styles.topBtnIcon} src={getImage("icon_16.png")} />
  1913. </div>
  1914. <div>速度调整</div>
  1915. </div>
  1916. ),
  1917. default: () => <TheSpeed onChange={(val) => handleChange(val)} />,
  1918. }}
  1919. </NPopover>
  1920. <NPopover
  1921. class={styles.popupWrap}
  1922. showArrow={false}
  1923. v-model:show={popup.staffShow}
  1924. trigger="click"
  1925. placement="bottom"
  1926. contentStyle={{ width: "320px" }}
  1927. >
  1928. {{
  1929. trigger: () => (
  1930. <div class={[styles.topBtn]}>
  1931. <div class={styles.btnImg}>
  1932. <img class={styles.topBtnIcon} src={getImage("icon_17.png")} />
  1933. </div>
  1934. <div>谱面显示</div>
  1935. </div>
  1936. ),
  1937. default: () => (
  1938. <>
  1939. <div class={styles.btnLineTitle}>乐谱大小</div>
  1940. <NSpace>
  1941. <NButton
  1942. type={abcData.abcOptions.staffwidth === 1200 ? "primary" : "default"}
  1943. secondary
  1944. onClick={() => {
  1945. abcData.abcOptions.staffwidth = 1200;
  1946. handleResetRender();
  1947. }}
  1948. >
  1949. </NButton>
  1950. <NButton
  1951. type={abcData.abcOptions.staffwidth === 800 ? "primary" : "default"}
  1952. secondary
  1953. onClick={() => {
  1954. abcData.abcOptions.staffwidth = 800;
  1955. handleResetRender();
  1956. }}
  1957. >
  1958. </NButton>
  1959. <NButton
  1960. type={abcData.abcOptions.staffwidth === 400 ? "primary" : "default"}
  1961. secondary
  1962. onClick={() => {
  1963. abcData.abcOptions.staffwidth = 400;
  1964. handleResetRender();
  1965. }}
  1966. >
  1967. </NButton>
  1968. </NSpace>
  1969. <div class={styles.btnLineTitle}>小节数</div>
  1970. <NSpace vertical>
  1971. <NInputNumber
  1972. min={1}
  1973. v-model:value={(abcData.abcOptions.wrap as any).preferredMeasuresPerLine}
  1974. placeholder="请输入小节数"
  1975. onUpdate:value={() => {
  1976. handleResetRender();
  1977. }}
  1978. />
  1979. {/* <NSpace style={{ marginTop: "20px" }} align="center" wrap={false} wrapItem={false}>
  1980. <NButton style={{ width: "48%" }} round onClick={() => (popup.staffShow = false)}>
  1981. 取消
  1982. </NButton>
  1983. <NButton
  1984. style={{ width: "48%" }}
  1985. round
  1986. type="primary"
  1987. >
  1988. 确定
  1989. </NButton>
  1990. </NSpace> */}
  1991. </NSpace>
  1992. </>
  1993. ),
  1994. }}
  1995. </NPopover>
  1996. <NPopover
  1997. class={styles.popupWrap}
  1998. showArrow={false}
  1999. v-model:show={popup.barShow}
  2000. trigger="click"
  2001. placement="bottom"
  2002. contentStyle={{ width: "320px" }}
  2003. >
  2004. {{
  2005. trigger: () => (
  2006. <div class={[styles.topBtn]}>
  2007. <div class={styles.btnImg}>
  2008. <img class={styles.topBtnIcon} src={getImage("icon_18.png")} />
  2009. </div>
  2010. <div>添加小节</div>
  2011. </div>
  2012. ),
  2013. default: () => (
  2014. <>
  2015. <div class={styles.btnLineTitle}>添加方式</div>
  2016. <NSpace>
  2017. <NButton
  2018. type={data.addMearseType === "pre" ? "primary" : "default"}
  2019. secondary
  2020. onClick={() => (data.addMearseType = "pre")}
  2021. >
  2022. 当前小节前
  2023. </NButton>
  2024. <NButton
  2025. type={data.addMearseType === "next" ? "primary" : "default"}
  2026. secondary
  2027. onClick={() => (data.addMearseType = "next")}
  2028. >
  2029. 当前小节后
  2030. </NButton>
  2031. <NButton
  2032. type={data.addMearseType === "finish" ? "primary" : "default"}
  2033. secondary
  2034. onClick={() => (data.addMearseType = "finish")}
  2035. >
  2036. 曲谱末尾
  2037. </NButton>
  2038. </NSpace>
  2039. <div class={styles.btnLineTitle}>小节数</div>
  2040. <NSpace vertical>
  2041. <NInputNumber
  2042. min={1}
  2043. v-model:value={data.addMearseNumber}
  2044. placeholder="请输入小节数"
  2045. />
  2046. <NSpace
  2047. style={{ marginTop: "20px" }}
  2048. align="center"
  2049. wrap={false}
  2050. wrapItem={false}
  2051. >
  2052. <NButton
  2053. style={{ width: "48%" }}
  2054. round
  2055. onClick={() => (popup.barShow = false)}
  2056. >
  2057. 取消
  2058. </NButton>
  2059. <NButton
  2060. style={{ width: "48%" }}
  2061. round
  2062. type="primary"
  2063. onClick={() => handleAddMearse()}
  2064. >
  2065. 确定
  2066. </NButton>
  2067. </NSpace>
  2068. </NSpace>
  2069. </>
  2070. ),
  2071. }}
  2072. </NPopover>
  2073. <NPopover
  2074. class={styles.popupWrap}
  2075. v-model:show={popup.mearseDeleteShow}
  2076. trigger="click"
  2077. placement="bottom"
  2078. >
  2079. {{
  2080. trigger: () => (
  2081. <div class={[styles.topBtn]}>
  2082. <div class={styles.btnImg}>
  2083. <img class={styles.topBtnIcon} src={getImage("icon_19.png")} />
  2084. </div>
  2085. <div>删除小节</div>
  2086. </div>
  2087. ),
  2088. default: () => (
  2089. <>
  2090. <div class={styles.btnLineTitle}>删除方式</div>
  2091. <NSpace vertical>
  2092. <NSpace>
  2093. <NButton
  2094. type={data.deleteMearseType === "ing" ? "primary" : "default"}
  2095. secondary
  2096. onClick={() => (data.deleteMearseType = "ing")}
  2097. >
  2098. 当前选中小节
  2099. </NButton>
  2100. <NButton
  2101. type={data.deleteMearseType === "finish" ? "primary" : "default"}
  2102. secondary
  2103. onClick={() => (data.deleteMearseType = "finish")}
  2104. >
  2105. 末尾空白小节
  2106. </NButton>
  2107. </NSpace>
  2108. <NSpace
  2109. style={{ marginTop: "20px" }}
  2110. align="center"
  2111. wrap={false}
  2112. wrapItem={false}
  2113. >
  2114. <NButton
  2115. style={{ width: "48%" }}
  2116. round
  2117. onClick={() => (popup.mearseDeleteShow = false)}
  2118. >
  2119. 取消
  2120. </NButton>
  2121. <NButton
  2122. style={{ width: "48%" }}
  2123. round
  2124. type="primary"
  2125. onClick={() => handleDeleteMearse()}
  2126. >
  2127. 确定
  2128. </NButton>
  2129. </NSpace>
  2130. </NSpace>
  2131. </>
  2132. ),
  2133. }}
  2134. </NPopover>
  2135. <div class={styles.topLine}></div>
  2136. <div style={{ marginLeft: "auto" }} class={styles.topBtn}>
  2137. <NSpin show={data.loadingAudioSrouce} size="small">
  2138. <div class={styles.btnImg} onClick={() => togglePlay("reset")}>
  2139. <img class={styles.topBtnIcon} src={getImage("icon_20.png")} />
  2140. </div>
  2141. </NSpin>
  2142. <div>重播</div>
  2143. </div>
  2144. <div class={styles.topBtn}>
  2145. <NSpin show={data.loadingAudioSrouce} size="small">
  2146. <div
  2147. class={styles.btnImg}
  2148. onClick={() => togglePlay(data.playState ? "pause" : "play")}
  2149. >
  2150. <img
  2151. style={{ display: data.playState ? "" : "none" }}
  2152. class={styles.topBtnIcon}
  2153. src={getImage("icon_21_1.png")}
  2154. />
  2155. <img
  2156. style={{ display: data.playState ? "none" : "" }}
  2157. class={styles.topBtnIcon}
  2158. src={getImage("icon_21.png")}
  2159. />
  2160. </div>
  2161. </NSpin>
  2162. <div>{data.playState ? "暂停" : "播放"}</div>
  2163. </div>
  2164. {/* styles.btnDisabled */}
  2165. <div
  2166. id="selectMearesBtn"
  2167. class={[styles.topBtn]}
  2168. onClick={() => (popup.selectMearesShow = !popup.selectMearesShow)}
  2169. >
  2170. <div class={[styles.btnImg, popup.selectMearesShow && styles.btnImgActive]}>
  2171. <img class={styles.topBtnIcon} src={getImage("icon_22.png")} />
  2172. </div>
  2173. <div>选段</div>
  2174. </div>
  2175. <div
  2176. class={[styles.topBtn]}
  2177. onClick={() => {
  2178. metronomeData.disable = !metronomeData.disable;
  2179. metronomeData.metro?.initPlayer();
  2180. }}
  2181. >
  2182. <div class={[styles.btnImg, !metronomeData.disable && styles.btnImgActive]}>
  2183. <img class={styles.topBtnIcon} src={getImage("icon_23.png")} />
  2184. </div>
  2185. <div>节拍器</div>
  2186. </div>
  2187. <div class={[styles.topBtn]} onClick={() => (popup.settingShow = true)}>
  2188. <div class={styles.btnImg}>
  2189. <img class={styles.topBtnIcon} src={getImage("icon_24.png")} />
  2190. </div>
  2191. <div>设置</div>
  2192. </div>
  2193. </div>
  2194. </div>
  2195. <div class={styles.content}>
  2196. <div class={styles.slide}>
  2197. <Collapse v-model={data.slide} elevation={false} divider={false}>
  2198. <CollapseItem title="音符时值" name="note">
  2199. <div class={styles.wrapBox}>
  2200. {ABC_DATA.types.map((item) => (
  2201. <div
  2202. class={styles.topBtn}
  2203. onClick={() => handleChange({ type: "type", value: item.value })}
  2204. >
  2205. <div
  2206. class={[styles.btnImg, data.noteType === item.value && styles.btnImgActive]}
  2207. >
  2208. <TheIcon iconClassName={item.icon} />
  2209. </div>
  2210. <div>{item.name}</div>
  2211. </div>
  2212. ))}
  2213. <div
  2214. class={styles.topBtn}
  2215. onClick={() => handleChange({ type: "note", value: "z" })}
  2216. >
  2217. <div
  2218. class={[
  2219. styles.btnImg,
  2220. noteComputed.value.content === "z" && styles.btnImgActive,
  2221. ]}
  2222. >
  2223. <img style={{ width: "20px", height: "20px" }} src={getImage("icon_rest.png")} />
  2224. </div>
  2225. <div>休止符</div>
  2226. </div>
  2227. <div
  2228. class={styles.topBtn}
  2229. onClick={() => handleChange({ type: "segno", value: " " })}
  2230. >
  2231. <div
  2232. class={[styles.btnImg, noteComputed.value.segno === " " && styles.btnImgActive]}
  2233. >
  2234. {/* <img style={{ width: "20px", height: "20px" }} src={getImage("icon_rest.png")} /> */}
  2235. </div>
  2236. <div>分割</div>
  2237. </div>
  2238. </div>
  2239. </CollapseItem>
  2240. <CollapseItem title="拍号" name="meter">
  2241. <div class={styles.wrapBox}>
  2242. {ABC_DATA.meter.map((item) => (
  2243. <div
  2244. class={styles.topBtn}
  2245. onClick={() => handleChange({ type: "meter", value: item.value })}
  2246. >
  2247. <div class={[styles.btnImg]}>
  2248. <TheIcon iconClassName={item.icon} />
  2249. </div>
  2250. <div>{item.name}</div>
  2251. </div>
  2252. ))}
  2253. </div>
  2254. </CollapseItem>
  2255. <CollapseItem title="力度记号" name="dynamics">
  2256. <div class={styles.wrapBox}>
  2257. {ABC_DATA.dynamics.slice(0, 8).map((item) => (
  2258. <div
  2259. class={styles.topBtn}
  2260. onClick={() => handleChange({ type: "dynamics", value: item.value })}
  2261. >
  2262. <div
  2263. class={[
  2264. styles.btnImg,
  2265. noteComputed.value.dynamics === item.value && styles.btnImgActive,
  2266. ]}
  2267. >
  2268. <TheIcon iconClassName={item.icon} size={["2em", "2em"]} />
  2269. </div>
  2270. <div>{item.name}</div>
  2271. </div>
  2272. ))}
  2273. <div
  2274. class={styles.topBtn}
  2275. onClick={() =>
  2276. handleChange({ type: "dynamics", value: ABC_DATA.dynamics[8].value })
  2277. }
  2278. >
  2279. <div
  2280. class={[
  2281. styles.btnImg,
  2282. ABC_DATA.dynamics[8].value.includes(noteComputed.value.dynamics) &&
  2283. styles.btnImgActive,
  2284. ]}
  2285. >
  2286. <TheIcon iconClassName={ABC_DATA.dynamics[8].icon} size={["2em", "2em"]} />
  2287. </div>
  2288. <div>{ABC_DATA.dynamics[8].name}</div>
  2289. </div>
  2290. <div
  2291. class={styles.topBtn}
  2292. onClick={() =>
  2293. handleChange({ type: "dynamics", value: ABC_DATA.dynamics[9].value })
  2294. }
  2295. >
  2296. <div
  2297. class={[
  2298. styles.btnImg,
  2299. ABC_DATA.dynamics[9].value.includes(noteComputed.value.dynamics) &&
  2300. styles.btnImgActive,
  2301. ]}
  2302. >
  2303. <TheIcon iconClassName={ABC_DATA.dynamics[9].icon} size={["2em", "2em"]} />
  2304. </div>
  2305. <div>{ABC_DATA.dynamics[9].name}</div>
  2306. </div>
  2307. </div>
  2308. </CollapseItem>
  2309. <CollapseItem title="反复与跳跃" name="repeat">
  2310. <div class={styles.wrapBox}>
  2311. {ABC_DATA.repeat.map((item) => (
  2312. <div
  2313. class={[styles.topBtn, styles.longTopBtn]}
  2314. onClick={() => handleChange({ type: "repeat", value: item.value })}
  2315. >
  2316. <div
  2317. class={[
  2318. styles.btnImg,
  2319. measureComputed.value.repeat === item.value && styles.btnImgActive,
  2320. ]}
  2321. >
  2322. <TheIcon iconClassName={item.icon} size={["5em", "1em"]} />
  2323. </div>
  2324. <div>{item.name}</div>
  2325. </div>
  2326. ))}
  2327. </div>
  2328. </CollapseItem>
  2329. <CollapseItem title="小节线" name="line">
  2330. <div class={styles.wrapBox}>
  2331. {ABC_DATA.bar.map((item) => (
  2332. <div
  2333. class={styles.topBtn}
  2334. onClick={() => {
  2335. data.morePlay = false;
  2336. handleChange({ type: "barline", value: item.value });
  2337. }}
  2338. >
  2339. <div
  2340. class={[
  2341. styles.btnImg,
  2342. measureComputed.value.barline === item.value && styles.btnImgActive,
  2343. ]}
  2344. >
  2345. <TheIcon iconClassName={item.icon} size={["2em", "2em"]} />
  2346. </div>
  2347. <div>{item.name}</div>
  2348. </div>
  2349. ))}
  2350. </div>
  2351. </CollapseItem>
  2352. <CollapseItem title="谱号" name="clef">
  2353. <div class={styles.wrapBox}>
  2354. {ABC_DATA.clef.map((item) => (
  2355. <div
  2356. class={styles.topBtn}
  2357. onClick={() => handleChange({ type: "clef", value: item.value })}
  2358. >
  2359. <div class={[styles.btnImg]}>
  2360. <TheIcon iconClassName={item.icon} />
  2361. </div>
  2362. <div>{item.name}</div>
  2363. </div>
  2364. ))}
  2365. </div>
  2366. </CollapseItem>
  2367. <CollapseItem title="调号" name="key">
  2368. <div class={styles.wrapBox}>
  2369. {ABC_DATA.key.map((item) => (
  2370. <div
  2371. class={styles.topBtn}
  2372. onClick={() => handleChange({ type: "key", value: item.value })}
  2373. >
  2374. <div class={[styles.btnImg]}>
  2375. <TheIcon iconClassName={item.icon} />
  2376. </div>
  2377. <div>{item.name}</div>
  2378. </div>
  2379. ))}
  2380. </div>
  2381. </CollapseItem>
  2382. </Collapse>
  2383. </div>
  2384. <div class={styles.box}>
  2385. <div class={styles.titleBox}>
  2386. <div class={styles.titleName} style={{ width: "50%", margin: "0 auto" }}>
  2387. <NInput
  2388. onBlur={() => {
  2389. data.isSave = false;
  2390. autoSave();
  2391. }}
  2392. onKeyup={(e: Event) => e.stopPropagation()}
  2393. v-model:value={data.musicName}
  2394. placeholder="曲谱名称"
  2395. />
  2396. </div>
  2397. <div style={{ width: "30%", margin: "10px 0 0 auto" }}>
  2398. <NInput
  2399. onBlur={() => {
  2400. data.isSave = false;
  2401. autoSave();
  2402. }}
  2403. onKeyup={(e: Event) => e.stopPropagation()}
  2404. v-model:value={data.creator}
  2405. placeholder="曲谱作者"
  2406. />
  2407. </div>
  2408. </div>
  2409. <div id="paper"></div>
  2410. {!data.loading && (
  2411. <Keys
  2412. show={data.active ? true : false}
  2413. instrumentCode={abcData.abc.subjectCode}
  2414. onClick={(val) => handleChange(val)}
  2415. />
  2416. )}
  2417. {/* <textarea ref={textAreaRef} class={styles.value} id="abc"></textarea> */}
  2418. <div id="importRef" style={{ display: "none" }}></div>
  2419. <div id="audio" style={{ display: "none" }}></div>
  2420. </div>
  2421. {data.loadingAudioSrouce && (
  2422. <div class={styles.loading}>
  2423. <NSpin description="资源加载中..."></NSpin>
  2424. </div>
  2425. )}
  2426. </div>
  2427. <div ref={downRef}></div>
  2428. <TheSetting v-model:show={popup.settingShow} />
  2429. {data.selectMeasures.state && (
  2430. <div
  2431. style={{ left: data.selectMeasures.x + "px", top: data.selectMeasures.y + "px" }}
  2432. class={[styles.selectMearesBox, !popup.selectMearesShow && styles.selectMearesHidden]}
  2433. >
  2434. <div onKeyup={(e: Event) => e.stopPropagation()}>
  2435. <NSpace justify="space-between">
  2436. <div class={styles.btnLineTitle}>输入小节范围</div>
  2437. <NButton
  2438. circle
  2439. quaternary
  2440. size="small"
  2441. onClick={() => (popup.selectMearesShow = false)}
  2442. >
  2443. <NIcon size={16} component={<Close />} />
  2444. </NButton>
  2445. </NSpace>
  2446. <NSpace align="center" wrap={false} wrapItem={false}>
  2447. <div class={styles.mearesInput}>
  2448. <NInputNumber
  2449. min={1}
  2450. max={
  2451. (data.selectMeasures.end ? data.selectMeasures.end + 1 : 0) ||
  2452. data.selectMeasures.max
  2453. }
  2454. bordered={false}
  2455. placeholder="开始小节"
  2456. showButton={false}
  2457. onUpdate:value={(val) => handleSetSelectMeares(val, "start")}
  2458. ></NInputNumber>
  2459. -
  2460. <NInputNumber
  2461. min={data.selectMeasures.start}
  2462. max={data.selectMeasures.max}
  2463. bordered={false}
  2464. placeholder="结束小节"
  2465. showButton={false}
  2466. onUpdate:value={(val) => handleSetSelectMeares(val, "end")}
  2467. ></NInputNumber>
  2468. </div>
  2469. <div class={styles.topBtn}>
  2470. <NSpin show={data.loadingAudioSrouce} size="small">
  2471. <div
  2472. class={styles.btnImg}
  2473. onClick={() => togglePlay(data.playState ? "pause" : "play")}
  2474. >
  2475. <img
  2476. style={{ display: data.playState ? "" : "none" }}
  2477. class={styles.topBtnIcon}
  2478. src={getImage("icon_21_1.png")}
  2479. />
  2480. <img
  2481. style={{ display: data.playState ? "none" : "" }}
  2482. class={styles.topBtnIcon}
  2483. src={getImage("icon_21.png")}
  2484. />
  2485. </div>
  2486. </NSpin>
  2487. </div>
  2488. </NSpace>
  2489. </div>
  2490. </div>
  2491. )}
  2492. </div>
  2493. <div class={styles.exportPng}>
  2494. <div id="exportPng"></div>
  2495. </div>
  2496. </>
  2497. );
  2498. },
  2499. });