daily: 2021-09-26

src/view/Header/LeftInfoBlock/index.js

@@ -0,0 +1,110 @@
+import { action } from "mobx";
+import { message } from "antd";
+import { observer } from "mobx-react-lite";
+import EditableContent from "../../../component/EditableContent";
+import store from "../../../store/global";
+import Row from "../../Row";
+import Text from "../../Text";
+
+const tones = [
+  "A",
+  "B",
+  "C",
+  "D",
+  "E",
+  "F",
+  "G",
+  "♭A",
+  "♭B",
+  "♭C",
+  "♭D",
+  "♭E",
+  "♭F",
+  "♭G",
+].map((t) => ({ key: t, text: t }));
+const beats = ["4/4"].map((t) => ({ key: t, text: t }));
+const handleChangeTone = action(function (value) {
+  store.tone = value;
+});
+const handleChangeSpeed = action(function (value) {
+  store.speed = value;
+});
+const handleChangeBeat = action(function (value) {
+  const beat = String(value).split("/");
+  if (beat.length !== 2) {
+    message.error("请以【*/*】的格式输入节拍！");
+    return false;
+  }
+  const [c, t] = [parseInt(beat[0], 10), parseInt(beat[1], 10)];
+  if (c > 0 && t > 0) {
+    store.beat = [c, t];
+  } else {
+    message.error("请输入大于0的拍数和时值！");
+    return false;
+  }
+});
+
+function LeftInfoBlock() {
+  return (
+    <>
+      <EditableContent
+        inputType="select"
+        initialValue={store.tone}
+        options={tones}
+        onChange={handleChangeTone}
+      >
+        <Row type="tone" editable offsetX={store.marginHorizontal} offsetY="64">
+          <Text>1&nbsp;&nbsp;= </Text>
+          {store.tone.startsWith("♭") && (
+            <Text x="25" y="-2" fontSize="12">
+              ♭
+            </Text>
+          )}
+
+          <Text editable x={store.tone.startsWith("♭") ? 34 : 28}>
+            {store.tone.at(-1)}
+          </Text>
+        </Row>
+      </EditableContent>
+      <EditableContent
+        title="节拍："
+        inputType="number"
+        initialValue={store.beat.join("/")}
+        onChange={handleChangeBeat}
+      >
+        <Row
+          type="beat"
+          editable
+          offsetX={store.marginHorizontal + 64}
+          offsetY="64"
+        >
+          <Text x="0" y="-8" textAnchor="middle">
+            {store.beat[0]}
+          </Text>
+          <Text x="0" y="12" textAnchor="middle">
+            {store.beat[1]}
+          </Text>
+          <line x1="-8" y1="8" x2="8" y2="8" stroke="black" />
+        </Row>
+      </EditableContent>
+      <EditableContent
+        title="速度（bps）："
+        inputType="number"
+        initialValue={store.speed}
+        onChange={handleChangeSpeed}
+      >
+        <Row
+          editable
+          type="speed"
+          offsetX={store.marginHorizontal}
+          offsetY="86"
+        >
+          <Text x="-4">♩</Text>
+          <Text x="14">=&nbsp;&nbsp;{store.speed}</Text>
+        </Row>
+      </EditableContent>
+    </>
+  );
+}
+
+export default observer(LeftInfoBlock);

src/view/Header/RightInfoBlock/index.js

@@ -0,0 +1,52 @@
+import { action } from "mobx";
+import { observer } from "mobx-react-lite";
+import EditableContent from "../../../component/EditableContent";
+import PopoverOnSvg from "../../../component/PopoverOnSvg";
+import escapeHtml from "../../../util/html-escape";
+import store from "../../../store/global";
+import Row from "../../Row";
+import Text from "../../Text";
+
+const handleChangeAuthor = action((index, value) => {
+  store.authors[index] = value;
+});
+
+function RightInfoBlock() {
+  return (
+    // TODO: working
+    <PopoverOnSvg
+      trigger="context"
+      placement="leftCenter"
+      renderPopover="x"
+      offset={{ x: -32 }}
+    >
+      <Row
+        type="authors"
+        offsetX={store.canvasWidth - store.marginHorizontal}
+        offsetY="64"
+      >
+        <rect
+          x="-100"
+          y="-4"
+          width="100"
+          height={store.authors.length * 22}
+          fill="transparent"
+        ></rect>
+        {store.authors.map((author, i) => (
+          <EditableContent
+            key={author}
+            title="作者信息："
+            initialValue={author}
+            onChange={handleChangeAuthor.bind(null, i)}
+          >
+            <Text editable y={i * 22} textAnchor="end">
+              {author}
+            </Text>
+          </EditableContent>
+        ))}
+      </Row>
+    </PopoverOnSvg>
+  );
+}
+
+export default observer(RightInfoBlock);

src/view/Header/Title/index.js

@@ -0,0 +1,34 @@
+import { action } from "mobx";
+import { observer } from "mobx-react-lite";
+import EditableContent from "../../../component/EditableContent";
+import store from "../../../store/global";
+import Row from "../../Row";
+import Text from "../../Text";
+const handleChangeTitle = action((value) => {
+  store.title = value;
+});
+
+function Title() {
+  return (
+    <Row type="title" offsetY="32">
+      <EditableContent
+        title="歌曲名称："
+        initialValue={store.title}
+        onChange={handleChangeTitle}
+      >
+        <Text
+          editable
+          x="50%"
+          fontSize="32"
+          fill="black"
+          stroke="none"
+          textAnchor="middle"
+        >
+          {store.title}
+        </Text>
+      </EditableContent>
+    </Row>
+  );
+}
+
+export default observer(Title);

src/view/Header/index.js

@@ -0,0 +1,16 @@
+import React from "react";
+import LeftInfoBlock from "./LeftInfoBlock";
+import RightInfoBlock from "./RightInfoBlock";
+import Title from "./Title";
+
+function Header() {
+  return (
+    <>
+      <Title></Title>
+      <LeftInfoBlock></LeftInfoBlock>
+      <RightInfoBlock></RightInfoBlock>
+    </>
+  );
+}
+
+export default React.memo(Header);