feat: 增加复制粘贴功能

src/util/editor.js

@@ -1,4 +1,7 @@
+import { remove, transaction } from "mobx";
+import state from "../store/state";
 import store from "../store/global";
+import { clearHistory, unwrappedAction } from "../store/history";
 import { createParagraphWithNotations } from "../util/paragraph";
 import { VERSION } from "./version";
 
@@ -49,8 +52,23 @@ function findParagraphAndNotation(key) {
   return res;
 }
 
+const resetGlobalData = unwrappedAction((globalData) => {
+  if (!globalData) {
+    globalData = getDefaultGlobalDataWidthNotations();
+  }
+  state.lastSelectedNotationKey = state.selectedNotationKey = state.tieSourceKey = null;
+  clearHistory();
+  transaction(() => {
+    for (const key of Object.keys(store)) {
+      remove(store, key);
+    }
+    Object.assign(store, globalData);
+  });
+});
+
 export {
   getDefaultGlobalData,
   findParagraphAndNotation,
   getDefaultGlobalDataWidthNotations,
+  resetGlobalData,
 };

src/util/file.js

@@ -1,11 +1,9 @@
 import { message } from "antd";
-import { remove, transaction } from "mobx";
 import { toJS } from "mobx";
-import globalState from "../store/state";
 import store from "../store/global";
-import { clearHistory } from "../store/history";
 import domtoimage from "./dom-to-image";
 import { VERSION } from "./version";
+import { resetGlobalData } from "./editor";
 
 function read(file) {
   return new Promise((resolve, reject) => {
@@ -23,14 +21,7 @@ async function loadFile(file) {
     message.error("不支持的文件格式，请使用最新版本");
     return;
   }
-  globalState.lastSelectedNotationKey = globalState.selectedNotationKey = null;
-  clearHistory();
-  transaction(() => {
-    for (const key of Object.keys(store)) {
-      remove(store, key);
-    }
-    Object.assign(store, data);
-  });
+  resetGlobalData(data);
 }
 
 function saveFile() {
@@ -45,12 +36,14 @@ function saveFile() {
 }
 
 function exportFile() {
-  domtoimage.toPng(document.querySelector("#temp_svg")).then((dataUrl) => {
-    const downloadLink = document.createElement("a");
-    downloadLink.download = (store.title || "未标题") + ".png";
-    downloadLink.href = dataUrl;
-    downloadLink.click();
-  });
+  domtoimage
+    .toPng(document.querySelector("#temp_svg"), { bgcolor: "white" })
+    .then((dataUrl) => {
+      const downloadLink = document.createElement("a");
+      downloadLink.download = (store.title || "未标题") + ".png";
+      downloadLink.href = dataUrl;
+      downloadLink.click();
+    });
 }
 
 export { saveFile, loadFile, exportFile };

src/util/notation.js

@@ -1,3 +1,5 @@
+import { toJS } from "mobx";
+
 const notations = {
   zero: "0",
   do: "1",
@@ -31,6 +33,7 @@ function isSeparator(notationOrNote) {
 // 创建符号
 function createNotation(initial) {
   const n = {
+    type: "notation",
     key: `n_${String(Math.random())}`,
     note: "0",
     octave: 0,
@@ -46,5 +49,11 @@ function createNotation(initial) {
   }
   return n;
 }
+function cloneNotation(notation) {
+  const origin = JSON.parse(JSON.stringify(toJS(notation)));
+  delete origin.key;
+  const n = createNotation(origin);
+  return n;
+}
 
-export { notations, isNote, isSeparator, createNotation };
+export { notations, isNote, isSeparator, createNotation, cloneNotation };

src/util/paragraph.js

@@ -1,8 +1,10 @@
-import { createNotation, notations as N } from "./notation";
+import { toJS } from "mobx";
+import { cloneNotation, createNotation, notations as N } from "./notation";
 
 // 新建段落
 function createParagraph(initial) {
   const p = {
+    type: "paragraph",
     key: `p_${String(Math.random())}`,
     // 符号列表
     notations: [],
@@ -25,5 +27,11 @@ function createParagraphWithNotations() {
     ],
   });
 }
+function cloneParagraph(paragraph) {
+  const origin = JSON.parse(JSON.stringify(toJS(paragraph)));
+  delete origin.key;
+  origin.notations = paragraph.notations.map((n) => cloneNotation(n));
+  return createParagraph(origin);
+}
 
-export { createParagraph, createParagraphWithNotations };
+export { createParagraph, createParagraphWithNotations, cloneParagraph };