Add options of panel display position

src/_locales/en/messages.json

@@ -127,18 +127,30 @@
   "buttonPositionLabel": {
     "message": "Display position"
   },
-  "rightUpLabel": {
+  "topRightLabel": {
     "message": "Top right"
   },
-  "rightDownLabel": {
+  "bottomRightLabel": {
     "message": "Bottom right"
   },
-  "leftUpLabel": {
+  "topLeftLabel": {
     "message": "Top left"
   },
-  "leftDownLabel": {
+  "bottomLeftLabel": {
     "message": "Bottom left"
   },
+  "topLabel": {
+    "message": "Top"
+  },
+  "bottomLabel": {
+    "message": "Bottom"
+  },
+  "leftLabel": {
+    "message": "Left"
+  },
+  "rightLabel": {
+    "message": "Right"
+  },
   "panelStyleLabel": {
     "message": "Translation panel"
   },
@@ -154,6 +166,21 @@
   "fontSizeLabel": {
     "message": "Font size"
   },
+  "referencePointLabel": {
+    "message": "Display position - Reference point"
+  },
+  "bottomSelectedTextLabel": {
+    "message": "Bottom of selected text"
+  },
+  "topSelectedTextLabel": {
+    "message": "Top of selected text"
+  },
+  "clickedPointLabel": {
+    "message": "Clicked point"
+  },
+  "displayDirectionLabel": {
+    "message": "Display position - Direction"
+  },
   "resultFontColorLabel": {
     "message": "Font color of translation result"
   },

src/content/components/TranslateButton.js

@@ -5,15 +5,24 @@ import "../styles/TranslateButton.scss";
 const calcPosition = () => {
   const buttonSize = parseInt(getSettings("buttonSize"));
   const offset = 10;
-  switch (getSettings("buttonPosition")) {
+  switch (getSettings("buttonDirection")) {
-    case "rightUp":
+    case "top":
+      return { top: -buttonSize - offset, left: -buttonSize / 2 };
+    case "bottom":
+      return { top: offset, left: -buttonSize / 2 };
+    case "right":
+      return { top: -buttonSize / 2, left: offset };
+    case "left":
+      return { top: -buttonSize / 2, left: -buttonSize - offset };
+    case "topRight":
       return { top: -buttonSize - offset, left: offset };
-    case "rightDown":
+    case "topLeft":
-      return { top: offset, left: offset };
-    case "leftUp":
       return { top: -buttonSize - offset, left: -buttonSize - offset };
-    case "leftDown":
+    case "bottomLeft":
       return { top: offset, left: -buttonSize - offset };
+    case "bottomRight":
+    default:
+      return { top: offset, left: offset };
   }
 };
 

src/content/components/TranslateContainer.js

@@ -25,13 +25,40 @@ const getSelectedPosition = () => {
         .getSelection()
         .getRangeAt(0)
         .getBoundingClientRect();
-  const selectedPosition = {
+
+  let selectedPosition;
+  const panelReferencePoint = getSettings("panelReferencePoint");
+  switch (panelReferencePoint) {
+    case "topSelectedText":
+      selectedPosition = {
+        x: selectedRect.left + selectedRect.width / 2,
+        y: selectedRect.top
+      };
+      break;
+    case "bottomSelectedText":
+    default:
+      selectedPosition = {
         x: selectedRect.left + selectedRect.width / 2,
         y: selectedRect.bottom
       };
+      break;
+  }
   return selectedPosition;
 };
 
+const calcPanelPosition = clickedPosition => {
+  const panelReferencePoint = getSettings("panelReferencePoint");
+  switch (panelReferencePoint) {
+    case "topSelectedText":
+      return getSelectedPosition("top");
+    case "bottomSelectedText":
+      return getSelectedPosition("bottom");
+    case "clickedPoint":
+      if (clickedPosition) return clickedPosition;
+      else return getSelectedPosition("bottom");
+  }
+};
+
 const translateText = async text => {
   const targetLang = getSettings("targetLang");
   const result = await translate(text, "auto", targetLang);
@@ -72,6 +99,7 @@ export default class TranslateContainer extends Component {
       statusText: "OK"
     };
     this.selectedText = "";
+    this.selectedPosition = { x: 0, y: 0 };
     this.init();
   }
 
@@ -93,10 +121,10 @@ export default class TranslateContainer extends Component {
         return tabInfo;
       case "translateSelectedText":
         this.selectedText = getSelectedText();
-        const position = getSelectedPosition();
         if (this.selectedText.length === 0) return;
+        this.selectedPosition = getSelectedPosition();
         this.hideButton();
-        this.showPanel(position);
+        this.showPanel();
         break;
     }
   };
@@ -108,8 +136,8 @@ export default class TranslateContainer extends Component {
     }
   };
 
-  showButton = position => {
+  showButton = clickedPosition => {
-    this.setState({ shouldShowButton: true, buttonPosition: position });
+    this.setState({ shouldShowButton: true, buttonPosition: clickedPosition });
   };
 
   hideButton = () => {
@@ -117,16 +145,20 @@ export default class TranslateContainer extends Component {
   };
 
   handleButtonClick = e => {
-    const position = { x: e.clientX, y: e.clientY };
+    const clickedPosition = { x: e.clientX, y: e.clientY };
-    this.showPanel(position);
+    this.showPanel(clickedPosition);
     this.hideButton();
   };
 
-  showPanel = async position => {
+  showPanel = async (clickedPosition = null) => {
+    const panelReferencePoint = getSettings("panelReferencePoint");
+    const useClickedPosition = panelReferencePoint === "clickedPoint" && clickedPosition !== null;
+    const panelPosition = useClickedPosition ? clickedPosition : this.selectedPosition;
+
     const result = await translateText(this.selectedText);
     this.setState({
       shouldShowPanel: true,
-      panelPosition: position,
+      panelPosition: panelPosition,
       resultText: result.resultText,
       candidateText: getSettings("ifShowCandidate") ? result.candidateText : "",
       statusText: result.statusText
@@ -148,13 +180,14 @@ export default class TranslateContainer extends Component {
     this.hidePanel();
 
     this.selectedText = getSelectedText();
-    const position = { x: e.clientX, y: e.clientY };
+    this.selectedPosition = getSelectedPosition();
+    const clickedPosition = { x: e.clientX, y: e.clientY };
 
     if (this.selectedText.length === 0) return;
-    this.handleTextSelect(position);
+    this.handleTextSelect(clickedPosition);
   };
 
-  handleTextSelect = async position => {
+  handleTextSelect = async clickedPosition => {
     const onSelectBehavior = getSettings("whenSelectText");
     if (onSelectBehavior === "dontShowButton") return;
 
@@ -164,9 +197,9 @@ export default class TranslateContainer extends Component {
     }
 
     if (onSelectBehavior === "showButton") {
-      this.showButton(position);
+      this.showButton(clickedPosition);
     } else if (onSelectBehavior === "showPanel") {
-      this.showPanel(position);
+      this.showPanel(clickedPosition);
     }
   };
 

src/content/components/TranslatePanel.js

@@ -30,13 +30,45 @@ export default class TranslatePanel extends Component {
     const panelHeight = Math.min(wrapper.clientHeight, maxHeight);
     const windowWidth = document.documentElement.clientWidth;
     const windowHeight = document.documentElement.clientHeight;
+    const referencePosition = this.props.position;
     const offset = 10;
 
-    //TODO: パネルの表示位置オプション
+    let position = { x: 0, y: 0 };
-    let position = {
+    const panelDirection = getSettings("panelDirection");
-      x: this.props.position.x - panelWidth / 2,
+    switch (panelDirection) {
-      y: this.props.position.y + offset
+      case "top":
-    };
+        position.x = referencePosition.x - panelWidth / 2;
+        position.y = referencePosition.y - panelHeight - offset;
+        break;
+      case "bottom":
+        position.x = referencePosition.x - panelWidth / 2;
+        position.y = referencePosition.y + offset;
+        break;
+      case "right":
+        position.x = referencePosition.x + offset;
+        position.y = referencePosition.y - panelHeight / 2;
+        break;
+      case "left":
+        position.x = referencePosition.x - panelWidth - offset;
+        position.y = referencePosition.y - panelHeight / 2;
+        break;
+      case "topRight":
+        position.x = referencePosition.x + offset;
+        position.y = referencePosition.y - panelHeight - offset;
+        break;
+      case "topLeft":
+        position.x = referencePosition.x - panelWidth - offset;
+        position.y = referencePosition.y - panelHeight - offset;
+        break;
+      case "bottomRight":
+        position.x = referencePosition.x + offset;
+        position.y = referencePosition.y + offset;
+        break;
+      case "bottomLeft":
+        position.x = referencePosition.x - panelWidth - offset;
+        position.y = referencePosition.y + offset;
+        break;
+    }
 
     if (position.x + panelWidth > windowWidth - offset) {
       position.x = windowWidth - panelWidth - offset;

src/settings/defaultSettings.js

@@ -142,29 +142,46 @@ export default [
             default: 22
           },
           {
-            id: "buttonPosition",
+            id: "buttonDirection",
             title: "buttonPositionLabel",
             captions: [],
             type: "select",
-            default: "rightDown",
+            default: "bottomRight",
             options: [
               {
-                name: "rightUpLabel",
+                name: "topLabel",
-                value: "rightUp"
+                value: "top"
               },
               {
-                name: "rightDownLabel",
+                name: "bottomLabel",
-                value: "rightDown"
+                value: "bottom"
               },
               {
-                name: "leftUpLabel",
+                name: "rightLabel",
-                value: "leftUp"
+                value: "right"
               },
               {
-                name: "leftDownLabel",
+                name: "leftLabel",
-                value: "leftDown"
+                value: "left"
+              },
+              {
+                name: "topRightLabel",
+                value: "topRight"
+              },
+              {
+                name: "topLeftLabel",
+                value: "topLeft"
+              },
+              {
+                name: "bottomRightLabel",
+                value: "bottomRight"
+              },
+              {
+                name: "bottomLeftLabel",
+                value: "bottomLeft"
               }
-            ]
+            ],
+            new: true
           }
         ]
       },
@@ -200,6 +217,70 @@ export default [
             placeholder: 13,
             default: 13
           },
+          {
+            id: "panelReferencePoint",
+            title: "referencePointLabel",
+            captions: [],
+            type: "select",
+            default: "bottomSelectedText",
+            options: [
+              {
+                name: "topSelectedTextLabel",
+                value: "topSelectedText"
+              },
+              {
+                name: "bottomSelectedTextLabel",
+                value: "bottomSelectedText"
+              },
+              {
+                name: "clickedPointLabel",
+                value: "clickedPoint"
+              }
+            ],
+            new: true
+          },
+          {
+            id: "panelDirection",
+            title: "displayDirectionLabel",
+            captions: [],
+            type: "select",
+            default: "bottom",
+            options: [
+              {
+                name: "topLabel",
+                value: "top"
+              },
+              {
+                name: "bottomLabel",
+                value: "bottom"
+              },
+              {
+                name: "rightLabel",
+                value: "right"
+              },
+              {
+                name: "leftLabel",
+                value: "left"
+              },
+              {
+                name: "topRightLabel",
+                value: "topRight"
+              },
+              {
+                name: "topLeftLabel",
+                value: "topLeft"
+              },
+              {
+                name: "bottomRightLabel",
+                value: "bottomRight"
+              },
+              {
+                name: "bottomLeftLabel",
+                value: "bottomLeft"
+              }
+            ],
+            new: true
+          },
           {
             id: "resultFontColor",
             title: "resultFontColorLabel",