daily: 2021-09-29 Night
This commit is contained in:
@@ -0,0 +1,220 @@
|
||||
import {
|
||||
FolderOpenOutlined,
|
||||
PlusOutlined,
|
||||
SaveOutlined,
|
||||
} 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 { 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 }) {
|
||||
switch (key) {
|
||||
case "undo":
|
||||
go(-1);
|
||||
break;
|
||||
case "redo":
|
||||
go(1);
|
||||
break;
|
||||
case "reset-title":
|
||||
runInWrappedAction(() => {
|
||||
store.title = "【歌曲名称】";
|
||||
});
|
||||
break;
|
||||
case "reset-authors":
|
||||
store.authors = [
|
||||
"【作曲者】 作曲",
|
||||
"【填词者】 填词",
|
||||
"【记谱者】 记谱",
|
||||
];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const handleClick = wrappedAction((ev) => {
|
||||
if (state.shouldNotationBlurAfterClick) {
|
||||
state.selectedNotationKey = null;
|
||||
}
|
||||
state.shouldNotationBlurAfterClick = true;
|
||||
});
|
||||
|
||||
const handleKeyPress = wrappedAction((ev) => {
|
||||
const inputKey = ev.key.toLowerCase();
|
||||
const shift = ev.shiftKey;
|
||||
const ctrl = ev.ctrlKey;
|
||||
|
||||
if (state.selectedNotationKey) {
|
||||
// 仅选中符号时作用
|
||||
const {
|
||||
paragraph,
|
||||
notation,
|
||||
paragraphIndex,
|
||||
notationIndex,
|
||||
} = findParagraphAndNotation(state.selectedNotationKey);
|
||||
if (!notation) {
|
||||
return;
|
||||
}
|
||||
switch (true) {
|
||||
case isNote(inputKey) && !ctrl && !shift:
|
||||
notation.note = inputKey;
|
||||
break;
|
||||
case inputKey === "-" && !ctrl && !shift:
|
||||
notation.note = N.extend;
|
||||
break;
|
||||
case inputKey === "|" && !ctrl:
|
||||
notation.note = N.separator;
|
||||
break;
|
||||
case inputKey === "u" && !ctrl && !shift:
|
||||
notation.underline += 1;
|
||||
break;
|
||||
case inputKey === "u" && !ctrl && shift:
|
||||
notation.underline -= 1;
|
||||
notation.underline = Math.max(0, notation.underline);
|
||||
break;
|
||||
case inputKey === "." && !ctrl && !shift:
|
||||
notation.dotted = !notation.dotted;
|
||||
break;
|
||||
case inputKey === "8" && !ctrl && !shift:
|
||||
notation.octave += 1;
|
||||
break;
|
||||
case inputKey === "*" && !ctrl:
|
||||
notation.octave -= 1;
|
||||
break;
|
||||
case inputKey === "#" && !ctrl:
|
||||
if (notation.prefixSups.indexOf("♯") !== 0) {
|
||||
if (notation.prefixSups[0] === "♭") {
|
||||
notation.prefixSups.shift();
|
||||
}
|
||||
notation.prefixSups.unshift("♯");
|
||||
} else {
|
||||
notation.prefixSups.shift();
|
||||
}
|
||||
break;
|
||||
case inputKey === "b" && !ctrl && !shift:
|
||||
if (notation.prefixSups.indexOf("♭") !== 0) {
|
||||
if (notation.prefixSups[0] === "♯") {
|
||||
notation.prefixSups.shift();
|
||||
}
|
||||
notation.prefixSups.unshift("♭");
|
||||
} else {
|
||||
notation.prefixSups.shift();
|
||||
}
|
||||
break;
|
||||
case inputKey === "~" && !ctrl:
|
||||
if (notation.topDecorators.includes("~")) {
|
||||
notation.topDecorators.splice(notation.topDecorators.indexOf("~"), 1);
|
||||
} else {
|
||||
notation.topDecorators.push("~");
|
||||
}
|
||||
break;
|
||||
case inputKey === "enter" && !ctrl && !shift:
|
||||
if (paragraph.notations[notationIndex + 1]) {
|
||||
state.selectedNotationKey =
|
||||
paragraph.notations[notationIndex + 1].key;
|
||||
} else {
|
||||
const nextNotation = createNotation();
|
||||
paragraph.notations.push(nextNotation);
|
||||
state.selectedNotationKey = nextNotation.key;
|
||||
}
|
||||
break;
|
||||
case inputKey === "enter" && !ctrl && shift:
|
||||
if (paragraph.notations[notationIndex - 1]) {
|
||||
state.selectedNotationKey =
|
||||
paragraph.notations[notationIndex - 1].key;
|
||||
}
|
||||
break;
|
||||
case inputKey === "enter" && ctrl && !shift:
|
||||
const newNotation = createNotation();
|
||||
paragraph.notations.splice(notationIndex + 1, 0, newNotation);
|
||||
state.selectedNotationKey = newNotation.key;
|
||||
break;
|
||||
case inputKey === "delete":
|
||||
paragraph.notations.splice(notationIndex, 1);
|
||||
const currNotation =
|
||||
paragraph.notations[notationIndex] ||
|
||||
paragraph.notations[notationIndex - 1];
|
||||
state.selectedNotationKey = currNotation?.key;
|
||||
break;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
||||
export { fileMenu, editMenu, convertMenu, handleKeyPress, handleClick };
|
||||
@@ -0,0 +1,75 @@
|
||||
import { 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 hasTie = notation.tieTo;
|
||||
return [
|
||||
{
|
||||
key: "octaveUp",
|
||||
text: "升高一个八度",
|
||||
visible: isNote(notation),
|
||||
onClick: wrappedAction(() => {
|
||||
notation.octave += 1;
|
||||
}),
|
||||
},
|
||||
{
|
||||
key: "octaveDown",
|
||||
text: "降低一个八度",
|
||||
visible: isNote(notation),
|
||||
onClick: wrappedAction(() => {
|
||||
notation.octave -= 1;
|
||||
}),
|
||||
},
|
||||
{
|
||||
key: "tie",
|
||||
text: notation.tieTo ? "删除连音线" : "从此处添加连音线到...",
|
||||
visible: isNote(notation),
|
||||
onClick: wrappedAction(() => {
|
||||
if (!hasTie) {
|
||||
state.tieSourceKey = notation.key;
|
||||
return;
|
||||
}
|
||||
const { notation: tieDesc } = findParagraphAndNotation(notation.tieTo);
|
||||
if (tieDesc) {
|
||||
tieDesc.tieTo = null;
|
||||
}
|
||||
notation.tieTo = null;
|
||||
}),
|
||||
},
|
||||
{
|
||||
key: "break-underline",
|
||||
text: notation.breakUnderline
|
||||
? "在此处延续增减时线"
|
||||
: "在此处打断增减时线",
|
||||
visible: isNote(notation),
|
||||
onClick: wrappedAction(() => {
|
||||
notation.breakUnderline = !notation.breakUnderline;
|
||||
}),
|
||||
},
|
||||
{
|
||||
key: "delete",
|
||||
text: "删除",
|
||||
onClick: wrappedAction(() => {
|
||||
const index = paragraph.notations.indexOf(notation);
|
||||
if (index !== -1) {
|
||||
paragraph.notations.splice(index, 1);
|
||||
} else {
|
||||
message.error("符号不存在");
|
||||
}
|
||||
}),
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
// ENHANCE: 改变<EditableContent>组件这个反人类的回调执行
|
||||
// 执行选项回调。。
|
||||
function handleNotationContext(options, key) {
|
||||
runInWrappedAction(() => (state.shouldNotationBlurAfterClick = false));
|
||||
const callback = options.find((ops) => ops.key === key)?.onClick;
|
||||
callback && callback();
|
||||
}
|
||||
|
||||
export { getNotationContextItems, handleNotationContext };
|
||||
@@ -0,0 +1,57 @@
|
||||
import {
|
||||
DeleteOutlined,
|
||||
EnterOutlined,
|
||||
MenuOutlined,
|
||||
PlusCircleOutlined,
|
||||
PlusOutlined,
|
||||
} 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";
|
||||
|
||||
function getParagraphMenuOptions(paragraph) {
|
||||
return [];
|
||||
const handleMenu = wrappedAction(({ key }) => {
|
||||
switch (key) {
|
||||
case "justify-auto":
|
||||
paragraph.alignJustify = null;
|
||||
break;
|
||||
case "justify-enable":
|
||||
paragraph.alignJustify = true;
|
||||
break;
|
||||
case "justify-disable":
|
||||
paragraph.alignJustify = false;
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Menu onClick={handleMenu}>
|
||||
<Menu.Item key="addNotation" icon={<PlusOutlined />}>
|
||||
添加符号
|
||||
</Menu.Item>
|
||||
<Menu.Item key="addParagraph" 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>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
// 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 };
|
||||
Reference in New Issue
Block a user