daily: 2021-09-27

src/view/Header/LeftInfoBlock/index.js

@@ -2,6 +2,7 @@ import { action } from "mobx";
 import { message } from "antd";
 import { observer } from "mobx-react-lite";
 import EditableContent from "../../../component/EditableContent";
+import P from "../../../util/placement";
 import store from "../../../store/global";
 import Row from "../../Row";
 import Text from "../../Text";
@@ -22,7 +23,6 @@ const tones = [
   "♭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;
 });
@@ -53,15 +53,20 @@ function LeftInfoBlock() {
         options={tones}
         onChange={handleChangeTone}
       >
-        <Row type="tone" editable offsetX={store.marginHorizontal} offsetY="64">
+        <Row
+          type="tone"
+          editable
+          offsetX={store.marginHorizontal}
+          offsetY={P.titleOffsetY}
+        >
           <Text>1&nbsp;&nbsp;= </Text>
           {store.tone.startsWith("♭") && (
-            <Text x="25" y="-2" fontSize="12">
+            <Text x="27" y="-2" fontSize="12">
               ♭
             </Text>
           )}
 
-          <Text editable x={store.tone.startsWith("♭") ? 34 : 28}>
+          <Text editable x={store.tone.startsWith("♭") ? 36 : 29}>
             {store.tone.at(-1)}
           </Text>
         </Row>
@@ -76,7 +81,7 @@ function LeftInfoBlock() {
           type="beat"
           editable
           offsetX={store.marginHorizontal + 64}
-          offsetY="64"
+          offsetY={P.titleOffsetY}
         >
           <Text x="0" y="-8" textAnchor="middle">
             {store.beat[0]}
@@ -97,10 +102,10 @@ function LeftInfoBlock() {
           editable
           type="speed"
           offsetX={store.marginHorizontal}
-          offsetY="86"
+          offsetY={P.titleOffsetY + 22}
         >
           <Text x="-4">♩</Text>
-          <Text x="14">=&nbsp;&nbsp;{store.speed}</Text>
+          <Text x="16">=&nbsp;{store.speed}</Text>
         </Row>
       </EditableContent>
     </>

src/view/Header/RightInfoBlock/index.js

@@ -1,40 +1,103 @@
+import { DeleteOutlined, EditOutlined, PlusOutlined } from "@ant-design/icons";
+import { Modal } from "antd";
 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 P from "../../../util/placement";
 import Row from "../../Row";
 import Text from "../../Text";
 
+const authorContextMenu = [
+  {
+    key: "create",
+    text: "添加",
+    icon: <PlusOutlined style={{ color: "grey" }} />,
+    onClick: () => {
+      store.authors.push("作者信息");
+    },
+  },
+  {
+    key: "delete",
+    text: "删除",
+    icon: <DeleteOutlined style={{ color: "grey" }} />,
+    onClick: (index) => {
+      store.authors.splice(index, 1);
+    },
+  },
+];
+const blockContextMenu = [
+  {
+    key: "create",
+    text: "添加作者信息",
+    icon: <PlusOutlined style={{ color: "grey" }} />,
+    onClick: () => {
+      store.authors.push("【作曲者】  作曲");
+      store.authors.push("【记谱者】  记谱");
+    },
+  },
+];
+const handleSelectMenu = action((index, value) => {
+  const menu = authorContextMenu.find((m) => m.key === value);
+  menu?.onClick(index);
+});
+const handleSelectBlockMenu = action((value) => {
+  const menu = blockContextMenu.find((m) => m.key === value);
+  menu?.onClick();
+});
 const handleChangeAuthor = action((index, value) => {
+  if (!value) {
+    return new Promise((resolve) => {
+      Modal.confirm({
+        title: "删除这条作者信息？",
+        okText: "确定",
+        cancelText: "取消",
+        onOk: () => {
+          resolve(true);
+          store.authors.splice(index, 1);
+        },
+        onCancel: () => {
+          resolve(true);
+        },
+      });
+    });
+  }
   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={P.titleOffsetY}
     >
-      <Row
-        type="authors"
-        offsetX={store.canvasWidth - store.marginHorizontal}
-        offsetY="64"
+      <EditableContent
+        inputType="select"
+        options={blockContextMenu}
+        popoverProps={{ trigger: "context" }}
+        onChange={handleSelectBlockMenu}
       >
+        // TODO: 添加新增指引
         <rect
-          x="-100"
-          y="-4"
-          width="100"
-          height={store.authors.length * 22}
-          fill="transparent"
+          x={store.marginHorizontal - 150}
+          y="-64"
+          width={150}
+          height={150}
+          fill={store.authors.length ? "none" : "transparent"}
+          // className={Styles.hotCorner}
         ></rect>
-        {store.authors.map((author, i) => (
+      </EditableContent>
+      {store.authors.map((author, i) => (
+        <EditableContent
+          key={i + author}
+          inputType="select"
+          options={authorContextMenu}
+          popoverProps={{ trigger: "context" }}
+          onChange={handleSelectMenu.bind(null, i)}
+        >
           <EditableContent
-            key={author}
             title="作者信息："
             initialValue={author}
             onChange={handleChangeAuthor.bind(null, i)}
@@ -43,9 +106,9 @@ function RightInfoBlock() {
               {author}
             </Text>
           </EditableContent>
-        ))}
-      </Row>
-    </PopoverOnSvg>
+        </EditableContent>
+      ))}
+    </Row>
   );
 }
 

src/view/Header/Title/index.js

@@ -1,5 +1,6 @@
 import { action } from "mobx";
 import { observer } from "mobx-react-lite";
+import { useEffect, useRef } from "react";
 import EditableContent from "../../../component/EditableContent";
 import store from "../../../store/global";
 import Row from "../../Row";
@@ -9,9 +10,17 @@ const handleChangeTitle = action((value) => {
 });
 
 function Title() {
+  const ref = useRef();
+  useEffect(() => {
+    store.popoverRefs.title = ref;
+    return () => {
+      store.popoverRefs.title = null;
+    };
+  }, []);
   return (
-    <Row type="title" offsetY="32">
+    <Row type="title" offsetY={store.marginTop}>
       <EditableContent
+        ref={ref}
         title="歌曲名称："
         initialValue={store.title}
         onChange={handleChangeTitle}