feat: 添加配置面板

2021-10-05 23:45:52 +08:00
parent 615ba6ffba
commit 44b4ef1a44
13 changed files with 524 additions and 124 deletions
@@ -1,7 +1,11 @@
 import {
  FolderOpenOutlined,
+  HighlightOutlined,
+  MenuUnfoldOutlined,
  PlusOutlined,
+  RedoOutlined,
  SaveOutlined,
+  UndoOutlined,
 } from "@ant-design/icons";
 import { Menu } from "antd";
 import { action } from "mobx";
@@ -13,69 +17,8 @@ import { findParagraphAndNotation } from "../util/editor";
 import { go, runInWrappedAction, wrappedAction } from "../store/history";

 const { SubMenu } = Menu;
-const fileMenu = (
-  <Menu>
-    <Menu.Item key="create" icon={<PlusOutlined />}>
-      新建
-    </Menu.Item>
-    <Menu.Item key="open" icon={<FolderOpenOutlined />}>
-      打开
-    </Menu.Item>
-    <Menu.Item key="save" icon={<SaveOutlined />}>
-      保存
-    </Menu.Item>
-  </Menu>
-);
-const editMenu = (
-  <Menu onClick={handleMenu}>
-    <Menu.Item key="undo">撤销</Menu.Item>
-    <Menu.Item key="redo">重做</Menu.Item>
-    <Menu.Item key="reset-title">添加段落</Menu.Item>
-    <Menu.Item key="reset-title">重置歌曲名称</Menu.Item>
-    <Menu.Item key="reset-authors">重置作者信息</Menu.Item>
-  </Menu>
-);

-const convertMenu = (
-  <Menu key="tone">
-    <SubMenu key="convert-to" title="转到...">
-      <Menu.Item key="convert-to-C">1 = C</Menu.Item>
-      <Menu.Item key="convert-to-D">1 = D</Menu.Item>
-      <Menu.Item key="convert-to-E">1 = E</Menu.Item>
-      <Menu.Item key="convert-to-F">1 = F</Menu.Item>
-      <Menu.Item key="convert-to-G">1 = G</Menu.Item>
-      <Menu.Item key="convert-to-A">1 = A</Menu.Item>
-      <Menu.Item key="convert-to-B">1 = B</Menu.Item>
-      <Menu.Item key="convert-to-bC">
-        1 = <sup>♭</sup>C
-      </Menu.Item>
-      <Menu.Item key="convert-to-bD">
-        1 = <sup>♭</sup>D
-      </Menu.Item>
-      <Menu.Item key="convert-to-bE">
-        1 = <sup>♭</sup>E
-      </Menu.Item>
-      <Menu.Item key="convert-to-bF">
-        1 = <sup>♭</sup>F
-      </Menu.Item>
-      <Menu.Item key="convert-to-bG">
-        1 = <sup>♭</sup>G
-      </Menu.Item>
-      <Menu.Item key="convert-to-bA">
-        1 = <sup>♭</sup>A
-      </Menu.Item>
-      <Menu.Item key="convert-to-bB">
-        1 = <sup>♭</sup>B
-      </Menu.Item>
-    </SubMenu>
-    <Menu.Item key="convert-up">升高一个音</Menu.Item>
-    <Menu.Item key="convert-down">降低一个音</Menu.Item>
-    <Menu.Item key="convert-up8">升高一个八度</Menu.Item>
-    <Menu.Item key="convert-down8">降低一个八度</Menu.Item>
-  </Menu>
-);
-
-function handleMenu({ key }) {
+const handleEditMenu = wrappedAction(({ key }) => {
  switch (key) {
    case "undo":
      go(-1);
@@ -96,7 +39,11 @@ function handleMenu({ key }) {
      ];
      break;
  }
-}
+});
+const handleConvertMenu = wrappedAction(() => {
+
+  console.log(111);
+});

 const handleClick = wrappedAction((ev) => {
  if (state.shouldNotationBlurAfterClick) {
@@ -217,4 +164,77 @@ const handleKeyPress = wrappedAction((ev) => {
  }
 });

+
+const fileMenu = (
+  <Menu>
+    <Menu.Item key="create" icon={<PlusOutlined />}>
+      新建
+    </Menu.Item>
+    <Menu.Item key="open" icon={<FolderOpenOutlined />}>
+      打开
+    </Menu.Item>
+    <Menu.Item key="save" icon={<SaveOutlined />}>
+      保存
+    </Menu.Item>
+  </Menu>
+);
+const editMenu = (
+  <Menu onClick={handleEditMenu}>
+    <Menu.Item key="undo" icon={<UndoOutlined />}>
+      撤销
+    </Menu.Item>
+    <Menu.Item key="redo" icon={<RedoOutlined />}>
+      重做
+    </Menu.Item>
+    <Menu.Item key="add-paragraph" icon={<MenuUnfoldOutlined />}>
+      添加段落
+    </Menu.Item>
+    <Menu.Item key="reset-title" icon={<HighlightOutlined />}>
+      重置歌曲名称
+    </Menu.Item>
+    <Menu.Item key="reset-authors" icon={<HighlightOutlined />}>
+      重置作者信息
+    </Menu.Item>
+  </Menu>
+);
+
+const convertMenu = (
+  <Menu key="tone" onClick={handleConvertMenu}>
+    <SubMenu key="convert-to" title="转到...">
+      <Menu.Item key="convert-to-C">1 = C</Menu.Item>
+      <Menu.Item key="convert-to-D">1 = D</Menu.Item>
+      <Menu.Item key="convert-to-E">1 = E</Menu.Item>
+      <Menu.Item key="convert-to-F">1 = F</Menu.Item>
+      <Menu.Item key="convert-to-G">1 = G</Menu.Item>
+      <Menu.Item key="convert-to-A">1 = A</Menu.Item>
+      <Menu.Item key="convert-to-B">1 = B</Menu.Item>
+      <Menu.Item key="convert-to-bC">
+        1 = <sup>♭</sup>C
+      </Menu.Item>
+      <Menu.Item key="convert-to-bD">
+        1 = <sup>♭</sup>D
+      </Menu.Item>
+      <Menu.Item key="convert-to-bE">
+        1 = <sup>♭</sup>E
+      </Menu.Item>
+      <Menu.Item key="convert-to-bF">
+        1 = <sup>♭</sup>F
+      </Menu.Item>
+      <Menu.Item key="convert-to-bG">
+        1 = <sup>♭</sup>G
+      </Menu.Item>
+      <Menu.Item key="convert-to-bA">
+        1 = <sup>♭</sup>A
+      </Menu.Item>
+      <Menu.Item key="convert-to-bB">
+        1 = <sup>♭</sup>B
+      </Menu.Item>
+    </SubMenu>
+    <Menu.Item key="convert-up">升高一个音</Menu.Item>
+    <Menu.Item key="convert-down">降低一个音</Menu.Item>
+    <Menu.Item key="convert-up8">升高一个八度</Menu.Item>
+    <Menu.Item key="convert-down8">降低一个八度</Menu.Item>
+  </Menu>
+);
+
 export { fileMenu, editMenu, convertMenu, handleKeyPress, handleClick };
@@ -1,33 +1,36 @@
-import { message } from "antd";
+import {
+  ArrowDownOutlined,
+  ArrowUpOutlined,
+  FontColorsOutlined,
+  MinusOutlined,
+  PlusOutlined,
+  RadiusSettingOutlined,
+  StopOutlined,
+} from "@ant-design/icons";
+import { Menu, message } from "antd";
 import state from "../store/state";
 import { findParagraphAndNotation } from "../util/editor";
 import { isNote } from "../util/notation";
 import { runInWrappedAction, wrappedAction } from "../store/history";

-const getNotationContextItems = (notation, paragraph) => {
+const getNotationContextMenu = (notation, paragraph) => {
  const hasTie = notation.tieTo;
-  return [
-    {
-      key: "octaveUp",
-      text: "升高一个八度",
-      visible: isNote(notation),
-      onClick: wrappedAction(() => {
+  const handleMenu = wrappedAction(function ({ key }) {
+    switch (key) {
+      case "octave-up":
        notation.octave += 1;
-      }),
-    },
-    {
-      key: "octaveDown",
-      text: "降低一个八度",
-      visible: isNote(notation),
-      onClick: wrappedAction(() => {
+        break;
+      case "octave-down":
        notation.octave -= 1;
-      }),
-    },
-    {
-      key: "tie",
-      text: notation.tieTo ? "删除连音线" : "从此处添加连音线到...",
-      visible: isNote(notation),
-      onClick: wrappedAction(() => {
+        break;
+      case "underline-add":
+        notation.underline += 1;
+        break;
+      case "underline-remove":
+        notation.underline -= 1;
+        notation.underline = Math.max(0, notation.underline);
+        break;
+      case "tie":
        if (!hasTie) {
          state.tieSourceKey = notation.key;
          return;
@@ -37,8 +40,59 @@ const getNotationContextItems = (notation, paragraph) => {
          tieDesc.tieTo = null;
        }
        notation.tieTo = null;
+        break;
+      case "break-underline":
+        notation.breakUnderline = !notation.breakUnderline;
+        break;
+    }
+  });
+
+  return (
+    <Menu onClick={handleMenu}>
+      <Menu.Item key="octave-up" icon={<ArrowUpOutlined />}>
+        升高一个八度（8）
+      </Menu.Item>
+      <Menu.Item key="octave-down" icon={<ArrowDownOutlined />}>
+        降低一个八度（Shift + 8）
+      </Menu.Item>
+      <Menu.Item key="underline-add" icon={<PlusOutlined />}>
+        添加增减时线（U）
+      </Menu.Item>
+      <Menu.Item key="underline-remove" icon={<MinusOutlined />}>
+        减少增减时线（Shift + U）
+      </Menu.Item>
+      <Menu.Item key="break-underline" icon={<StopOutlined />}>
+        {notation.breakUnderline ? "在此处延续增减时线" : "在此处打断增减时线"}
+      </Menu.Item>
+      <Menu.Item key="tie" icon={<RadiusSettingOutlined />}>
+        {notation.tieTo ? "删除连音线" : "从此处添加连音线到..."}
+      </Menu.Item>
+    </Menu>
+  );
+
+  return [
+    {
+      key: "octaveUp",
+      text: "升高一个八度（8）",
+      visible: isNote(notation),
+      onClick: wrappedAction(() => {
+        notation.octave += 1;
      }),
    },
+    {
+      key: "octaveDown",
+      text: "降低一个八度（Shift + 8）",
+      visible: isNote(notation),
+      onClick: wrappedAction(() => {
+        notation.octave -= 1;
+      }),
+    },
+    {
+      key: "tie",
+      text: notation.tieTo ? "删除连音线" : "从此处添加连音线到...",
+      visible: isNote(notation),
+      onClick: wrappedAction(() => {}),
+    },
    {
      key: "break-underline",
      text: notation.breakUnderline
@@ -64,7 +118,7 @@ const getNotationContextItems = (notation, paragraph) => {
  ];
 };

-// ENHANCE: 改变<EditableContent>组件这个反人类的回调执行
+// ENHANCE: 使用EditableContent组件的overlay属性传入菜单
 // 执行选项回调。。
 function handleNotationContext(options, key) {
  runInWrappedAction(() => (state.shouldNotationBlurAfterClick = false));
@@ -72,4 +126,4 @@ function handleNotationContext(options, key) {
  callback && callback();
 }

-export { getNotationContextItems, handleNotationContext };
+export { getNotationContextMenu, handleNotationContext };
@@ -11,8 +11,8 @@ import store from "../store/global";
 import { go, runInWrappedAction, wrappedAction } from "../store/history";

 function getParagraphMenuOptions(paragraph) {
-  return [];
  const handleMenu = wrappedAction(({ key }) => {
+    console.log(1111111111, key);
    switch (key) {
      case "justify-auto":
        paragraph.alignJustify = null;
@@ -46,12 +46,4 @@ function getParagraphMenuOptions(paragraph) {
  );
 }

-// ENHANCE: 同notation的菜单项处理函数，改改改
-// TODO: working 现在就改！然后EditableContent应该直接传入antd的菜单项
-_function handleSelectParagraphMenu(options, key) {
-  runInWrappedAction(() => (state.shouldNotationBlurAfterClick = false));
-  const callback = options.find((ops) => ops.key === key)?.onClick;
-  callback && callback();
-}
-
-export { getParagraphMenuOptions, handleSelectParagraphMenu };
+export { getParagraphMenuOptions };