From 75b23174bf31f78db96c079685903cbe308dff7c Mon Sep 17 00:00:00 2001
From: josc146 <josStorer@outlook.com>
Date: Tue, 21 Mar 2023 16:33:19 +0800
Subject: [PATCH] feat: make the floating selectionTools follow the scrolling,
 while the result window remains fixed (#40)

---
 src/components/ConversationCard/index.jsx |  1 -
 src/components/FloatingToolbar/index.jsx  | 10 +++++++---
 src/content-script/index.jsx              | 16 +++++-----------
 src/utils/get-client-position.mjs         |  4 ++++
 src/utils/index.mjs                       |  1 +
 5 files changed, 17 insertions(+), 15 deletions(-)
 create mode 100644 src/utils/get-client-position.mjs

diff --git a/src/components/ConversationCard/index.jsx b/src/components/ConversationCard/index.jsx
index 117b019..4362e6a 100644
--- a/src/components/ConversationCard/index.jsx
+++ b/src/components/ConversationCard/index.jsx
@@ -213,7 +213,6 @@ function ConversationCard(props) {
                 <FloatingToolbar
                   session={session}
                   selection=""
-                  position={position}
                   container={toolbarContainer}
                   closeable={true}
                   triggered={true}
diff --git a/src/components/FloatingToolbar/index.jsx b/src/components/FloatingToolbar/index.jsx
index bc8625b..bb5ccd8 100644
--- a/src/components/FloatingToolbar/index.jsx
+++ b/src/components/FloatingToolbar/index.jsx
@@ -4,7 +4,7 @@ import ConversationCard from '../ConversationCard'
 import PropTypes from 'prop-types'
 import { defaultConfig, getUserConfig } from '../../config/index.mjs'
 import { config as toolsConfig } from '../../content-script/selection-tools'
-import { isMobile, setElementPositionInViewport } from '../../utils'
+import { getClientPosition, isMobile, setElementPositionInViewport } from '../../utils'
 import Draggable from 'react-draggable'
 import { useClampWindowSize } from '../../hooks/use-clamp-window-size'
 
@@ -16,8 +16,8 @@ function FloatingToolbar(props) {
   const [triggered, setTriggered] = useState(props.triggered)
   const [config, setConfig] = useState(defaultConfig)
   const [render, setRender] = useState(false)
-  const [position, setPosition] = useState(props.position)
   const [closeable, setCloseable] = useState(props.closeable)
+  const [position, setPosition] = useState(getClientPosition(props.container))
   const [virtualPosition, setVirtualPosition] = useState({ x: 0, y: 0 })
   const windowSize = useClampWindowSize([750, 1500], [0, Infinity])
 
@@ -25,6 +25,8 @@ function FloatingToolbar(props) {
     getUserConfig().then((config) => {
       setConfig(config)
       setRender(true)
+
+      if (!triggered) props.container.style.position = 'absolute'
     })
   }, [])
 
@@ -127,6 +129,9 @@ function FloatingToolbar(props) {
             className: 'chatgptbox-selection-toolbar-button',
             title: toolConfig.label,
             onClick: async () => {
+              const p = getClientPosition(props.container)
+              props.container.style.position = 'fixed'
+              setPosition(p)
               setPrompt(await toolConfig.genPrompt(selection))
               setTriggered(true)
             },
@@ -149,7 +154,6 @@ function FloatingToolbar(props) {
 FloatingToolbar.propTypes = {
   session: PropTypes.object.isRequired,
   selection: PropTypes.string.isRequired,
-  position: PropTypes.object.isRequired,
   container: PropTypes.object.isRequired,
   triggered: PropTypes.bool,
   closeable: PropTypes.bool,
diff --git a/src/content-script/index.jsx b/src/content-script/index.jsx
index 42612f4..664efc3 100644
--- a/src/content-script/index.jsx
+++ b/src/content-script/index.jsx
@@ -121,14 +121,12 @@ async function prepareForSelectionTools() {
     setTimeout(() => {
       const selection = window.getSelection()?.toString()
       if (selection) {
-        const position = { x: e.clientX + 15, y: e.clientY - 15 }
-        toolbarContainer = createElementAtPosition(position.x, position.y)
+        toolbarContainer = createElementAtPosition(e.pageX + 15, e.pageY - 15)
         toolbarContainer.className = 'chatgptbox-toolbar-container'
         render(
           <FloatingToolbar
             session={initSession()}
             selection={selection}
-            position={position}
             container={toolbarContainer}
             dockable={true}
           />,
@@ -169,17 +167,15 @@ async function prepareForSelectionToolsTouch() {
     setTimeout(() => {
       const selection = window.getSelection()?.toString()
       if (selection) {
-        const position = {
-          x: e.changedTouches[0].clientX + 15,
-          y: e.changedTouches[0].clientY - 15,
-        }
-        toolbarContainer = createElementAtPosition(position.x, position.y)
+        toolbarContainer = createElementAtPosition(
+          e.changedTouches[0].pageX + 15,
+          e.changedTouches[0].pageY - 15,
+        )
         toolbarContainer.className = 'chatgptbox-toolbar-container'
         render(
           <FloatingToolbar
             session={initSession()}
             selection={selection}
-            position={position}
             container={toolbarContainer}
             dockable={true}
           />,
@@ -214,7 +210,6 @@ async function prepareForRightClickMenu() {
           <FloatingToolbar
             session={initSession()}
             selection=""
-            position={position}
             container={container}
             triggered={true}
             closeable={true}
@@ -229,7 +224,6 @@ async function prepareForRightClickMenu() {
           <FloatingToolbar
             session={initSession()}
             selection={data.selectionText}
-            position={position}
             container={container}
             triggered={true}
             closeable={true}
diff --git a/src/utils/get-client-position.mjs b/src/utils/get-client-position.mjs
new file mode 100644
index 0000000..7a7a45c
--- /dev/null
+++ b/src/utils/get-client-position.mjs
@@ -0,0 +1,4 @@
+export function getClientPosition(e) {
+  const rect = e.getBoundingClientRect()
+  return { x: rect.left, y: rect.top }
+}
diff --git a/src/utils/index.mjs b/src/utils/index.mjs
index 3884b7c..bdcfdd8 100644
--- a/src/utils/index.mjs
+++ b/src/utils/index.mjs
@@ -2,6 +2,7 @@ export * from './create-element-at-position'
 export * from './crop-text'
 export * from './ends-with-question-mark'
 export * from './fetch-sse'
+export * from './get-client-position'
 export * from './get-conversation-pairs'
 export * from './get-possible-element-by-query-selector'
 export * from './init-session'