🚧 Fix floating panel out of boundary. (#33)

* 🚧 Fix floating panel out of boundary. * 🐛 Fix can not mark word bug. ---------
tolerious · Aug 30, 2024 · c4ccab4 · c4ccab4
1 parent 123cfd4
commit c4ccab4
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 25 deletions.
diff --git a/src/plugins/entryPoint/background.js b/src/plugins/entryPoint/background.js
@@ -3,8 +3,6 @@
 import {
   getCurrentTabId,
   getCurrentTabUrl,
-  getLoginToken,
-  pingPong,
   setLoginToken,
 } from "./utils/background.utils";
 

diff --git a/src/plugins/general/utils.js b/src/plugins/general/utils.js
@@ -157,14 +157,14 @@ function convertCurrentTextNodeContent(textNode, targetWordList) {
 
 export function customizeGeneralEvent() {
   addSelectionChangeEvent();
-  customizeMouseDownEvent();
+  addMouseDownEvent();
   listenFromFloatingPanelEvent();
 }
 
 /**
  * 监听mousedown事件，当用户点击悬浮图标时，显示翻译面板
  */
-function customizeMouseDownEvent() {
+function addMouseDownEvent() {
   document.addEventListener("mousedown", async function (event) {
     const mouseX = event.clientX;
     const mouseY = event.clientY;
@@ -235,17 +235,18 @@ function customizeMouseDownEvent() {
  * 监听selectionchange事件，当用户选中文本时，显示悬浮图标
  */
 function addSelectionChangeEvent() {
-  document.addEventListener("selectionchange", function () {
+  document.addEventListener("selectionchange", async function () {
+    sendMessageFromGeneralScriptToFloatingPanel({
+      type: "token",
+      message: await getLoginToken(),
+    });
     const selection = window.getSelection();
     const range = selection.getRangeAt(0);
     if (selection.toString().trim()) {
       const rect = range.getBoundingClientRect();
-      let x = calculateSelectionPosition(rect, floatingIconSize).x;
-      let y = calculateSelectionPosition(rect, floatingIconSize).y;
-      gSelectionPosition = calculateSelectionPosition(
-        rect,
-        translationPanelSize
-      );
+      let x = calculateFloatingIconPosition(rect, floatingIconSize).x;
+      let y = calculateFloatingIconPosition(rect, floatingIconSize).y;
+      gSelectionPosition = calculateFloatingPanelPosition(range);
       gSelectionPosition.y = rect.top;
       // FIXME: 这里没有考虑到selection的位置可能会超出屏幕的情况
       showFloatingIcon(x, y);
@@ -254,7 +255,7 @@ function addSelectionChangeEvent() {
   });
 }
 
-function calculateSelectionPosition(rect, baseElementSize) {
+function calculateFloatingIconPosition(rect, baseElementSize) {
   return {
     x: (rect.right - rect.left) / 2 + rect.left - baseElementSize.width / 2,
     y: rect.top - baseElementSize.height,

diff --git a/src/webPage/translationFloatingPanel/src/App.vue b/src/webPage/translationFloatingPanel/src/App.vue
@@ -34,7 +34,7 @@ import {
   SEARCH_WORD,
   USER_SETTING
 } from './constants';
-import { customPost } from './utils/customRequest';
+import { customGet, customPost } from './utils/customRequest';
 
 interface CustomEvent extends Event {
   detail: string;
@@ -163,7 +163,7 @@ function handleClick() {
 }
 
 function listenEventFromGeneralScript() {
-  document.addEventListener('generalScriptEvent', (e: Event) => {
+  document.addEventListener('generalScriptEvent', async (e: Event) => {
     const ee = e as CustomEvent;
     const data = JSON.parse(ee.detail);
     switch (data.type) {
@@ -192,7 +192,17 @@ function listenEventFromGeneralScript() {
         }
         break;
       case 'token':
-        localStorage.setItem('token', data.message);
+        localStorage.setItem('floatingPanelToken', data.message);
+        if (!groupId.value) {
+          if (shouldAddToDefaultGroup()) {
+            const userSetting = await customGet(USER_SETTING);
+            groupId.value = userSetting.data.data.defaultGroupID;
+          } else {
+            const g = (await createGroup()).data.data;
+            groupId.value = g._id;
+          }
+        }
+
         break;
       default:
         break;
@@ -253,13 +263,6 @@ async function createGroup() {
 
 onMounted(async () => {
   listenEventFromGeneralScript();
-  if (shouldAddToDefaultGroup()) {
-    const userSetting = (await customPost(USER_SETTING, {})).data.data;
-    groupId.value = userSetting.defaultGroupID;
-  } else {
-    const g = (await createGroup()).data.data;
-    groupId.value = g._id;
-  }
 });
 
 function sendMessageToGeneralScript(message: any) {

diff --git a/src/webPage/translationFloatingPanel/src/utils/customRequest.ts b/src/webPage/translationFloatingPanel/src/utils/customRequest.ts
@@ -8,21 +8,28 @@ const instance = axios.create({
   }
 });
 
+axios.interceptors.request.use((config) => {
+  return config;
+});
+
 axios.interceptors.response.use((response) => {
   return response;
 });
 
 export const customGet = async (url: string) => {
-  instance.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
+  instance.defaults.headers.common['Authorization'] =
+    `Bearer ${localStorage.getItem('floatingPanelToken')}`;
   return instance.get(url);
 };
 
 export const customPost = async (url: string, data: any) => {
-  instance.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
+  instance.defaults.headers.common['Authorization'] =
+    `Bearer ${localStorage.getItem('floatingPanelToken')}`;
   return instance.post(url, data);
 };
 
 export const customDelete = async (url: string, data: any) => {
-  instance.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
+  instance.defaults.headers.common['Authorization'] =
+    `Bearer ${localStorage.getItem('floatingPanelToken')}`;
   return instance.delete(url, data);
 };