mattuy/numerical-notation-editor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 添加帮助面板

Browse Source
This commit is contained in:
Haven Mattuy
2021-10-06 12:15:58 +08:00
parent cfb73205b1
commit 65a63081fc
11 changed files with 304 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/menu/editor.js
+81 -13
View File
@@ -8,11 +8,10 @@ import {
UndoOutlined,
} from "@ant-design/icons";
import { Menu } from "antd";
import { action } from "mobx";
import Notation from "../view/Notation";
import state from "../store/state";
import store from "../store/global";
import { createNotation, isNote, notations as N } from "../util/notation";
import { createParagraph } from "../util/paragraph";
import { findParagraphAndNotation } from "../util/editor";
import { go, runInWrappedAction, wrappedAction } from "../store/history";
@@ -38,15 +37,30 @@ const handleEditMenu = wrappedAction(({ key }) => {
"【记谱者】 记谱",
];
break;
case "add-paragraph": {
store.paragraphs.push(
createParagraph({
notations: [
createNotation({ note: "0" }),
createNotation({ note: "0" }),
createNotation({ note: "0" }),
createNotation({ note: "0" }),
createNotation({ note: N.separator }),
],
})
);
break;
}
}
});
const handleConvertMenu = wrappedAction(() => {
console.log(111);
});
// 画布上的点击事件
const handleClick = wrappedAction((ev) => {
if (state.shouldNotationBlurAfterClick) {
if (state.shouldNotationBlurAfterClick && state.selectedNotationKey) {
state.lastSelectedNotationKey = state.selectedNotationKey;
state.selectedNotationKey = null;
}
state.shouldNotationBlurAfterClick = true;
@@ -104,7 +118,7 @@ const handleKeyPress = wrappedAction((ev) => {
notation.prefixSups.shift();
}
break;
case inputKey === "b" && !ctrl && !shift:
case inputKey === "b" && !ctrl && !shift: {
if (notation.prefixSups.indexOf("♭") !== 0) {
if (notation.prefixSups[0] === "♯") {
notation.prefixSups.shift();
@@ -114,14 +128,17 @@ const handleKeyPress = wrappedAction((ev) => {
notation.prefixSups.shift();
}
break;
case inputKey === "~" && !ctrl:
}
case inputKey === "~" && !ctrl: {
if (notation.topDecorators.includes("~")) {
notation.topDecorators.splice(notation.topDecorators.indexOf("~"), 1);
} else {
notation.topDecorators.push("~");
}
break;
case inputKey === "enter" && !ctrl && !shift:
}
case inputKey === "l" && !ctrl && !shift:
case inputKey === "enter" && !ctrl && !shift: {
if (paragraph.notations[notationIndex + 1]) {
state.selectedNotationKey =
paragraph.notations[notationIndex + 1].key;
@@ -131,40 +148,91 @@ const handleKeyPress = wrappedAction((ev) => {
state.selectedNotationKey = nextNotation.key;
}
break;
case inputKey === "enter" && !ctrl && shift:
}
case inputKey === "h" && !ctrl && !shift:
case inputKey === "enter" && !ctrl && shift: {
if (paragraph.notations[notationIndex - 1]) {
state.selectedNotationKey =
paragraph.notations[notationIndex - 1].key;
}
break;
case inputKey === "enter" && ctrl && !shift:
}
case inputKey === "enter" && ctrl && !shift: {
const newNotation = createNotation();
paragraph.notations.splice(notationIndex + 1, 0, newNotation);
state.selectedNotationKey = newNotation.key;
break;
case inputKey === "delete":
}
case inputKey === "j" && !ctrl && !shift: {
const nextParagraph = store.paragraphs[paragraphIndex + 1];
if (nextParagraph?.notations?.length) {
const nextNotation =
nextParagraph.notations[notationIndex] ||
nextParagraph.notations.at(-1);
state.selectedNotationKey = nextNotation.key;
}
break;
}
case inputKey === "k" && !ctrl && !shift: {
const prevParagraph = store.paragraphs[paragraphIndex - 1];
if (prevParagraph?.notations?.length) {
const prevNotation =
prevParagraph.notations[notationIndex] ||
prevParagraph.notations.at(-1);
state.selectedNotationKey = prevNotation.key;
}
break;
}
case inputKey === "delete" && !ctrl && !shift: {
paragraph.notations.splice(notationIndex, 1);
const currNotation =
paragraph.notations[notationIndex] ||
paragraph.notations[notationIndex - 1];
state.selectedNotationKey = currNotation?.key;
break;
}
case inputKey === "=" && !ctrl && !shift: {
if (typeof paragraph.alignJustify !== "boolean") {
paragraph.alignJustify = !(
paragraphIndex ===
store.paragraphs.length - 1
);
}
paragraph.alignJustify = !paragraph.alignJustify;
break;
}
}
} else {
// 仅未选中符号时
switch (true) {
case ["h", "j", "k", "l"].includes(inputKey): {
state.selectedNotationKey =
state.lastSelectedNotationKey ||
store.paragraphs?.at(0)?.notations?.at(0).key;
}
}
}
// 全局
switch (true) {
case inputKey === "z" && ctrl && !shift:
console.log("undo");
go(-1);
break;
case inputKey === "y" && ctrl && !shift:
case inputKey === "z" && ctrl && shift:
console.log("redo");
go(1);
break;
case inputKey === "?" && !ctrl: {
if (state.helpDialogVisible) {
state.helpDialogVisible = false;
} else {
state.configDialogVisible = false;
state.helpDialogVisible = true;
}
break;
}
}
});
const fileMenu = (
<Menu>
<Menu.Item key="create" icon={<PlusOutlined />}>
src/menu/notation.js
+27 -35
View File
@@ -1,8 +1,10 @@
import {
ArrowDownOutlined,
ArrowUpOutlined,
DeleteOutlined,
FontColorsOutlined,
MinusOutlined,
PauseOutlined,
PlusOutlined,
RadiusSettingOutlined,
StopOutlined,
@@ -10,27 +12,14 @@ import {
import { Menu, message } from "antd";
import state from "../store/state";
import { findParagraphAndNotation } from "../util/editor";
import { isNote } from "../util/notation";
import { isNote, isSeparator } from "../util/notation";
import { runInWrappedAction, wrappedAction } from "../store/history";
const getNotationContextMenu = (notation, paragraph) => {
const hasTie = notation.tieTo;
const handleMenu = wrappedAction(function ({ key }) {
switch (key) {
case "octave-up":
notation.octave += 1;
break;
case "octave-down":
notation.octave -= 1;
break;
case "underline-add":
notation.underline += 1;
break;
case "underline-remove":
notation.underline -= 1;
notation.underline = Math.max(0, notation.underline);
break;
case "tie":
switch (true) {
case key === "tie":
if (!hasTie) {
state.tieSourceKey = notation.key;
return;
@@ -41,31 +30,34 @@ const getNotationContextMenu = (notation, paragraph) => {
}
notation.tieTo = null;
break;
case "break-underline":
case key === "break-underline":
notation.breakUnderline = !notation.breakUnderline;
break;
case key.startsWith("separator-"): {
const separator = key.split("-", 2)[1];
notation.note = separator;
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 ? "删除连音线" : "从此处添加连音线到..."}
// ENHANCE: 分音符类型显示菜单项
<Menu onClick={handleMenu} style={{ minWidth: "80px" }}>
{
<Menu.Item key="break-underline" icon={<StopOutlined />}>
{notation.breakUnderline
? "在此处延续增减时线"
: "在此处打断增减时线"}
</Menu.Item>
}
{
<Menu.Item key="tie" icon={<RadiusSettingOutlined />}>
{notation.tieTo ? "删除连音线" : "从此处添加连音线到..."}
</Menu.Item>
}
<Menu.Item key="delete" icon={<DeleteOutlined />}>
删除
</Menu.Item>
</Menu>
);
src/menu/paragraph.js
+27 -26
View File
@@ -1,44 +1,45 @@
import {
DeleteOutlined,
EnterOutlined,
MenuOutlined,
PlusCircleOutlined,
PlusOutlined,
} from "@ant-design/icons";
import { DeleteOutlined, EnterOutlined } from "@ant-design/icons";
import { Menu } from "antd";
import state from "../store/state";
import store from "../store/global";
import { go, runInWrappedAction, wrappedAction } from "../store/history";
import { createNotation, notations } from "../util/notation";
import { createParagraph } from "../util/paragraph";
import { wrappedAction } from "../store/history";
function getParagraphMenuOptions(paragraph) {
const handleMenu = wrappedAction(({ key }) => {
console.log(1111111111, key);
switch (key) {
case "justify-auto":
paragraph.alignJustify = null;
case "add": {
const idx = store.paragraphs.findIndex((p) => p.key === paragraph.key);
const para = createParagraph({
notations: [
createNotation({ note: "0" }),
createNotation({ note: "0" }),
createNotation({ note: "0" }),
createNotation({ note: "0" }),
createNotation({ note: notations.separator }),
],
});
if (idx !== -1) {
store.paragraphs.splice(idx + 1, 0, para);
} else {
store.paragraphs.push(para);
}
break;
case "justify-enable":
paragraph.alignJustify = true;
break;
case "justify-disable":
paragraph.alignJustify = false;
}
case "delete":
const idx = store.paragraphs.findIndex((p) => p.key === paragraph.key);
if (idx !== -1) {
store.paragraphs.splice(idx, 1);
}
break;
}
});
return (
<Menu onClick={handleMenu}>
<Menu.Item key="addNotation" icon={<PlusOutlined />}>
添加符号
</Menu.Item>
<Menu.Item key="addParagraph" icon={<EnterOutlined />}>
<Menu.Item key="add" icon={<EnterOutlined />}>
添加段落
</Menu.Item>
<Menu.SubMenu key="justify" title="两端对齐" icon={<MenuOutlined />}>
<Menu.Item key="justify-auto">自动</Menu.Item>
<Menu.Item key="justify-enable">启用</Menu.Item>
<Menu.Item key="justify-disable">禁用</Menu.Item>
</Menu.SubMenu>
<Menu.Item danger key="delete" icon={<DeleteOutlined />}>
删除段落
</Menu.Item>