feat: 添加括号符号

close #1
This commit is contained in:
2021-10-07 14:50:14 +08:00
parent c0eb2d5d70
commit c0bdf1fb63
3 changed files with 45 additions and 32 deletions
+36 -2
View File
@@ -1,4 +1,8 @@
import { message } from "antd";
import { toJS } from "mobx"; import { toJS } from "mobx";
import state from "../store/state";
import { wrappedAction } from "../store/history";
import { findParagraphAndNotation } from "./editor";
const notations = { const notations = {
zero: "0", zero: "0",
@@ -11,8 +15,8 @@ const notations = {
si: "7", si: "7",
extend: "─", extend: "─",
separator: "│", separator: "│",
crackerOpen: "", crackerOpen: "(",
crackerClose: ")" crackerClose: ")",
}; };
const notes = [ const notes = [
notations.zero, notations.zero,
@@ -61,6 +65,35 @@ function cloneNotation(notation) {
return n; return n;
} }
// 放置连音线
const placeTie = wrappedAction((notation) => {
if (state.tieSourceKey) {
// 处理连音线
if (state.tieSourceKey === notation.key) {
state.tieSourceKey = null;
// NOTICE: 如果要添加其他逻辑注意这里的return
return;
}
const {
notation: sourceNotation,
paragraph: sourceParagraph,
} = findParagraphAndNotation(state.tieSourceKey);
if (!sourceNotation) {
state.tieSourceKey = null;
return;
}
if (!sourceParagraph.notations.includes(notation)) {
message.warn("只允许相同段落的音符相连!");
} else if (!isNote(notation)) {
message.warn("只允许在音符上添加连音线!");
} else {
sourceNotation.tieTo = notation.key;
notation.tieTo = sourceNotation.key;
}
state.tieSourceKey = null;
}
});
export { export {
notations, notations,
isNote, isNote,
@@ -68,4 +101,5 @@ export {
isSeparator, isSeparator,
createNotation, createNotation,
cloneNotation, cloneNotation,
placeTie,
}; };
+7 -2
View File
@@ -40,9 +40,14 @@ function HelpModal({ visible, onVisibleChange }) {
<KeyboardDescItem kbd="h j k l" desc="移动焦点" /> <KeyboardDescItem kbd="h j k l" desc="移动焦点" />
</ul> </ul>
<h3>仅选中符号时</h3> <h3>仅选中符号时</h3>
<h4>输入</h4> <h4>输入音符</h4>
直接按键盘上相应的键即可输入到当前符号支持的音符符号有
<p>
<kbd className={Styles.kbd}>0~7</kbd>
<kbd className={Styles.kbd}>( )</kbd>
</p>
<h4>输入辅助元素</h4>
<ul className={Styles.list}> <ul className={Styles.list}>
<KeyboardDescItem kbd="0~7, -" desc="输入音符" />
<KeyboardDescItem kbd="|" desc="输入小节线" /> <KeyboardDescItem kbd="|" desc="输入小节线" />
<KeyboardDescItem kbd="." desc="输入附点" /> <KeyboardDescItem kbd="." desc="输入附点" />
<KeyboardDescItem kbd="~" desc="颤音符号" /> <KeyboardDescItem kbd="~" desc="颤音符号" />
+2 -28
View File
@@ -1,12 +1,10 @@
import { message } from "antd";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import EditableContent from "../../component/EditableContent"; import EditableContent from "../../component/EditableContent";
import state from "../../store/state"; import state from "../../store/state";
import store from "../../store/global"; import store from "../../store/global";
import P, { calcSubTextWidth } from "../../util/placement"; import P, { calcSubTextWidth } from "../../util/placement";
import { findParagraphAndNotation } from "../../util/editor";
import { getNotationContextMenu } from "../../menu/notation"; import { getNotationContextMenu } from "../../menu/notation";
import { isNote, notations } from "../../util/notation"; import { notations, placeTie } from "../../util/notation";
import { wrappedAction } from "../../store/history"; import { wrappedAction } from "../../store/history";
import Row from "../Row"; import Row from "../Row";
import Text from "../Text"; import Text from "../Text";
@@ -24,31 +22,7 @@ function Notation({ offsetX, notation, paragraph }) {
const handleClick = wrappedAction(() => { const handleClick = wrappedAction(() => {
state.selectedNotationKey = notation.key; state.selectedNotationKey = notation.key;
state.shouldNotationBlurAfterClick = false; state.shouldNotationBlurAfterClick = false;
if (state.tieSourceKey) { placeTie(notation);
// 处理连音线
if (state.tieSourceKey === notation.key) {
state.tieSourceKey = null;
// NOTICE: 如果要添加其他逻辑注意这里的return
return;
}
const {
notation: sourceNotation,
paragraph: sourceParagraph,
} = findParagraphAndNotation(state.tieSourceKey);
if (!sourceNotation) {
state.tieSourceKey = null;
return;
}
if (!sourceParagraph.notations.includes(notation)) {
message.warn("只允许相同段落的音符相连!");
} else if (!isNote(notation)) {
message.warn("只允许在音符上添加连音线!");
} else {
sourceNotation.tieTo = notation.key;
notation.tieTo = sourceNotation.key;
}
state.tieSourceKey = null;
}
}); });
const underlineOffset = P.underlineStepOffsetY * (notation.underline | 0); const underlineOffset = P.underlineStepOffsetY * (notation.underline | 0);