feat: 优化输入体验

src/util/editor.js

@@ -1,6 +1,5 @@
 import store from "../store/global";
-import { createNotation, notations } from "../util/notation";
-import { createParagraph } from "../util/paragraph";
+import { createParagraphWithNotations } from "../util/paragraph";
 import { VERSION } from "./version";
 
 const initialData = {
@@ -16,7 +15,7 @@ const initialData = {
   gapAfterTitle: 16,
   gapAfterHeader: 32,
   gapBetweenParagraph: 32,
-  gapBetweenNotation: 8,
+  gapBetweenNotation: 16,
   beat: [4, 4],
   speed: 75,
   authors: ["佚名  作词", "简谱编辑器  制谱"],
@@ -28,17 +27,7 @@ function getDefaultGlobalData() {
 }
 function getDefaultGlobalDataWidthNotations() {
   const d = getDefaultGlobalData();
-  d.paragraphs = [
-    createParagraph({
-      notations: [
-        createNotation({ note: "0" }),
-        createNotation({ note: "0" }),
-        createNotation({ note: "0" }),
-        createNotation({ note: "0" }),
-        createNotation({ note: notations.separator }),
-      ],
-    }),
-  ];
+  d.paragraphs = [createParagraphWithNotations()];
   return d;
 }
 
@@ -55,6 +44,7 @@ function findParagraphAndNotation(key) {
       res.paragraphIndex = i;
       return true;
     }
+    return false;
   });
   return res;
 }

src/util/file.js

@@ -1,6 +1,7 @@
 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";
@@ -20,9 +21,9 @@ async function loadFile(file) {
   const data = await read(file);
   if (!(data.version <= VERSION)) {
     message.error("不支持的文件格式，请使用最新版本");
-    console.log(data);
     return;
   }
+  globalState.lastSelectedNotationKey = globalState.selectedNotationKey = null;
   clearHistory();
   transaction(() => {
     for (const key of Object.keys(store)) {
@@ -44,12 +45,6 @@ function saveFile() {
 }
 
 function exportFile() {
-  // const canvas = document.createElement("canvas");
-  // const ctx = canvas.getContext("2d");
-  // const dpi = window.devicePixelRatio || 1;
-  // canvas.style.width = store.canvasWidth;
-  // canvas.style.height = store.canvasHeight;
-  // ctx.scale(dpi, dpi);
   domtoimage.toPng(document.querySelector("#temp_svg")).then((dataUrl) => {
     const downloadLink = document.createElement("a");
     downloadLink.download = (store.title || "未标题") + ".png";

src/util/paragraph.js

@@ -1,3 +1,5 @@
+import { createNotation, notations as N } from "./notation";
+
 // 新建段落
 function createParagraph(initial) {
   const p = {
@@ -12,5 +14,16 @@ function createParagraph(initial) {
   }
   return p;
 }
+function createParagraphWithNotations() {
+  return createParagraph({
+    notations: [
+      createNotation({ note: "0" }),
+      createNotation({ note: "0" }),
+      createNotation({ note: "0" }),
+      createNotation({ note: "0" }),
+      createNotation({ note: N.separator }),
+    ],
+  });
+}
 
-export { createParagraph };
+export { createParagraph, createParagraphWithNotations };

src/util/placement.js

@@ -6,22 +6,6 @@ import store from "../store/global";
 let canvas, context2D, defaultFontFamily;
 let measureSvgEl, measureTextEl;
 
-function _calcFontData(fontSize) {
-  const span = document.createElement("span");
-  span.style.fontFamily = window.getComputedStyle(document.body).fontFamily;
-  span.style.fontSize = `${fontSize}px`;
-  span.style.visibility = "hidden";
-  span.style.position = "absolute";
-  span.style.display = "inline-block";
-  span.textContent = "x";
-  document.body.appendChild(span);
-  const data = span.getBoundingClientRect();
-  return {
-    xWidth: data.width,
-    xHeight: data.height,
-  };
-}
-
 function _initializeCanvas(fontSize) {
   if (!canvas) {
     canvas = document.createElement("canvas");
@@ -151,7 +135,8 @@ function calcParagraphContentHeight(paragraph) {
   }
   let tieHeight = 0;
   if (_hasTie(paragraph)) {
-    tieHeight = placement.maxTieHeight;
+    // FIXME: 应该计算连音线高度
+    // tieHeight = placement.maxTieHeight;
   }
   // 段落高度不是最高的音符的高度，而是上边偏移最大的音符的上部分偏移量+下边偏移最
   // 大的音符的下部分偏移量
@@ -184,7 +169,8 @@ function calcParagraphAboveOffset(paragraph) {
   }
   let tieHeight = 0;
   if (_hasTie(paragraph)) {
-    tieHeight = placement.maxTieHeight;
+    // FIXME: 应该计算连音线高度
+    // tieHeight = placement.maxTieHeight;
   }
   const notationOffset = notations
     .map((n) => calcNotationAboveOffset(n))